/*
  Theme Name: SteelCity - Construction Building Template
  Support: themedox@gmail.com
  Description: SteelCity - Construction Building Template
  Version: 1.0
*/

/* CSS Index
============================
01. Variable CSS
02. Common CSS
03. Button
04. Header
05. Search
06. OffCanvas
07. Mobile Menu
08. Banner
09. About
10. Services
11. Work
12. Counter
13. Employee
14. Get Updates
15. Working Process
16. Faq
17. Testimonial
18. Messages
19. News
20. Footer
21. Breadcrumb
22. Contact Form
23. Contact Map
24. Call to Action
============================
*/

/*=============================
	1. Google Fonts
===============================*/
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Rubik:wght@300;400;500;600;700;800&display=swap');

/*=============================
	01. Variable CSS start
===============================*/
:root {
	--body-font-family: 'Rubik', sans-serif;
	--heading-font-family: 'Rajdhani', sans-serif;
	--link-font-family: 'Rajdhani', sans-serif;
	--primary: #0030d8;
	--black: #171717;
	--white: #ffffff;
	--heading-font-color: #171717;
	--heading-font-weight: 700;
	--body-font-color: #616670;
	--paragraph-color: #616670;
	--section-background: #F3F3F3;
	--body-font-size: 16px;
	--body-font-weight: 400;
	--body-line-height: 1.875em;
	--section-title-line-height: 1.25em;
	--footer-font-colour: rgba(255, 255, 255, 0.8);
	--transision: all 0.3s ease-out 0s;
	--border-colour: #E3E3E3;
}


/*=============================
	02. Common CSS start
===============================*/
* {
	margin: 0;
	padding: 0;
	outline: none;
	box-sizing: border-box;
}

body {
	font-family: var(--body-font-family);
	font-weight: var(--body-font-weight);
	font-size: var(--body-font-size);
	line-height: var(--body-line-height);
	color: var(--black);
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--heading-font-family);
	color: var(--heading-font-color);
	font-weight: var(--heading-font-weight);
	margin: 0;
	padding: 0;
}


h2 {
	font-size: 48px;
}

h3 {
	font-size: 32px;
}

h4 {
	font-size: 24px;
}

h6 {
	font-size: 18px;
	line-height: 1.5em;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	color: inherit;
}

a,
span,
small {
	display: inline-block;
}

a,
button {
	-webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-ms-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;
	transition: all 0.3s ease-out 0s;
	text-decoration: none;
}

a:focus,
.btn:focus,
button:focus {
	text-decoration: none;
	outline: none;
	box-shadow: none;
}


ul,
ol {
	margin: 0;
	padding: 0;
}

p {
	font-size: var(--body-font-size);
	font-weight: var(--body-font-weight);
	line-height: var(--body-line-height);
	color: var(--paragraph-color);
	margin: 0;
	padding: 0;
}

.uppercase {
	text-transform: uppercase;
}

.capitalize {
	text-transform: capitalize;
}

*::-moz-selection {
	background: var(--primary);
	color: var(--white);
	text-shadow: none;
}

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

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

.section-title-one {
	margin-bottom: 60px;
}

.section-title-one .sub-title {
	font-size: 18px;
	color: var(--primary);
	font-family: var(--heading-font-family);
	font-weight: 700;
	margin-bottom: 10px;
	position: relative;
	margin-left: 30px;
	letter-spacing: 4px;
}

.section-title-one .sub-title.dark {
	color: var(--black);
}

.section-title-one .sub-title.white {
	color: var(--white);
}

.section-title-one .sub-title::before {
	position: absolute;
	top: 50%;
	right: -30px;
	transform: translateY(-50%);
	width: 20px;
	height: 1px;
	background-color: var(--primary);
	content: "";
}

.section-title-one .sub-title::after {
	position: absolute;
	top: 50%;
	left: -30px;
	transform: translateY(-50%);
	width: 20px;
	height: 1px;
	background-color: var(--primary);
	content: "";
}

.section-title-one .no-after {
	margin-left: 0;
}

.section-title-one .no-after::after {
	display: none;
}

.section-title-one .title {
	font-size: 48px;
	line-height: var(--section-title-line-height);
	text-transform: capitalize;
}

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

.container {
	padding-left: 15px;
	padding-right: 15px;
}

.row {
	--bs-gutter-x: 30px;
}

.row.g-0 {
	--bs-gutter-x: 0;
}

.gutter-y-30 {
	--bs-gutter-y: 30px;
}

/*=============================
	03. Button style start
===============================*/
.common-btn {
	color: var(--white);
	font-weight: 700;
	padding: 14px 30px;
	background-color: var(--primary);
	border-radius: 5px;
	margin-top: 40px;
	font-family: var(--link-font-family);
}

.common-btn:hover {
	background-color: var(--black);
}

.common-btn i {
	margin-left: 10px;
	font-size: 14px;
}

.border-btn {
	background-color: transparent;
	border: 1px solid var(--primary);
	color: var(--black);
}

.border-btn:hover {
	background-color: var(--primary);
	color: var(--white);
}

.dark-btn {
	background-color: transparent;
	border: 1px solid var(--border-colour);
	color: var(--black);
}

.dark-btn:hover {
	background-color: var(--primary);
	color: var(--white);
	border-color: var(--primary);
}

/*=============================
	04. Header part
===============================*/

/* header area one start */
.header-area-one {
	background-color: var(--section-background);
	width: 100%;
	z-index: 99;
	position: relative;
}

.header-area-one .container-fluid {
	padding: 0 60px;
}

.header-area-one .navbar-nav {
	margin-left: 92px;
}

.header-area-one .navbar {
	padding: 0;
}

.header-area-one .navbar-expand-lg .navbar-nav .nav-link {
	padding: 0;
}

.header-area-one .navbar-nav .nav-item {
	position: relative;
}

.header-area-one .navbar-nav .nav-link {
	color: var(--black);
	font-weight: 500;
	margin-right: 24px;
	line-height: 6.25em;
}

.header-area-one .navbar-nav .nav-link.active {
	color: var(--primary);
}

.header-area-one .navbar-nav .nav-link i {
	font-size: 10px;
}

.header-area-one .navbar-nav .nav-item:hover .nav-link {
	color: var(--primary);
}

.header-area-one .header-right-info .social ul li {
	display: inline-block;
}

.header-area-one .header-right-info .social ul li a {
	font-size: 15px;
	color: var(--black);
	margin-left: 25px;
}

.header-area-one .header-right-info .social ul li a:hover {
	color: var(--primary);
}

.header-area-one .header-right-info .help-number .icon {
	width: 55px;
	height: 55px;
	text-align: center;
	line-height: 55px;
	border-radius: 50%;
	color: var(--primary);
	background-color: rgba(0, 48, 216, 0.1);
	margin-right: 15px;
	transition: var(--transision);
}

.header-area-one .header-right-info .help-number {
	margin-left: 71px;
}

.header-area-one .header-right-info .help-number:hover .icon {
	background-color: var(--primary);
	color: var(--white);
}

.header-area-one .header-right-info .help-number .info p {
	color: var(--black);
}

.header-area-one .header-right-info .help-number .info h6 {
	font-weight: 700;
}

.header-area-one .header-right-info .help-number .info h6:hover a {
	color: var(--primary);
}

.header-area-one .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	background-color: var(--white);
	box-shadow: 0px 10px 30px 0px rgba(137, 139, 142, 0.2);
	padding: 18px 0;
	transition: all 0.3s ease-in-out;
	visibility: hidden;
	opacity: 0;
	margin-top: 20px;
}

.header-area-one .sub-menu li a {
	color: var(--black);
	font-weight: 500;
	line-height: 38px;
	padding: 0 20px;
	width: 100%;
}

.header-area-one .sub-menu li a:hover {
	color: var(--primary);
}

.header-area-one .navbar-nav .nav-item:hover>.sub-menu {
	margin-top: 0;
	visibility: visible;
	opacity: 1;
}

/* header area two */
.header-area-two {
	position: absolute;
	top: 28px;
	left: 0;
	width: 100%;
	z-index: 99;
}

.header-area-two .header-top {
	margin-bottom: 24px;
}

.header-area-two .header-info-item {
	position: relative;
	margin-left: 81px;
}

.header-area-two .header-info-item:first-child {
	margin-left: 0px;
}

.header-area-two .header-info-item::before {
	position: absolute;
	top: 9px;
	right: -42px;
	width: 1px;
	height: 46px;
	background-color: rgba(255, 255, 255, 0.2);
	content: "";
}

.header-area-two .header-info-item:last-child:before {
	display: none;
}

.header-area-two .header-info-item .icon {
	margin-right: 15px;
}

.header-area-two .header-info-item .icon i {
	color: var(--primary);
	font-size: 40px;
}

.header-area-two .header-info-item .content span {
	font-size: 14px;
	color: var(--white);
}

.header-area-two .header-info-item .content .title {
	font-size: 18px;
	color: var(--white);
}

.header-area-two .header-info-item .content .title a:hover {
	color: var(--primary);
}

.header-area-two .menu-area {
	background-color: var(--white);
	border-radius: 5px;
}

.header-area-two .menu-area .menu-content {
	padding-left: 40px;
}

.header-area-two .navbar {
	padding: 0;
}

.header-area-two .navbar-expand-lg .navbar-nav .nav-link {
	padding: 0;
}

.header-area-two .navbar-nav .nav-item {
	position: relative;
}

.header-area-two .navbar-nav .nav-link {
	color: var(--black);
	font-weight: 500;
	margin-right: 29px;
	line-height: 5em;
}

.header-area-two .navbar-nav .nav-item:last-child .nav-link {
	margin-right: 0;
}

.header-area-two .navbar-nav .nav-link.active {
	color: var(--primary);
}

.header-area-two .navbar-nav .nav-link i {
	font-size: 10px;
}

.header-area-two .navbar-nav .nav-item:hover .nav-link {
	color: var(--primary);
}

.header-area-two .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	background-color: var(--white);
	box-shadow: 0px 10px 30px 0px rgba(137, 139, 142, 0.2);
	padding: 18px 0;
	transition: all 0.3s ease-in-out;
	visibility: hidden;
	opacity: 0;
	margin-top: 20px;
}

.header-area-two .sub-menu li a {
	color: var(--black);
	font-weight: 500;
	line-height: 38px;
	padding: 0 20px;
	width: 100%;
}

.header-area-two .sub-menu li a:hover {
	color: var(--primary);
}

.header-area-two .navbar-nav .nav-item:hover>.sub-menu {
	margin-top: 0;
	visibility: visible;
	opacity: 1;
}

.header-area-two .menu-area .search-box button {
	font-size: 20px;
	color: var(--body-font-color);
	line-height: 4em;
	padding: 0px 30px;
	background-color: transparent;
	border: 0;
	border-left: 1px solid var(--border-colour);
	border-right: 1px solid var(--border-colour);
}

.header-area-two .menu-area .search-box button:hover {
	color: var(--primary);
}

.header-area-two .menu-area .offcanvas-menu button {
	font-size: 20px;
	color: var(--body-font-color);
	line-height: 4em;
	padding: 0px 30px;
	background-color: transparent;
	border: 0;
	border-right: 1px solid var(--border-colour);
}

.header-area-two .menu-area .offcanvas-menu button:hover {
	color: var(--primary);
}

.header-area-two .menu-area .menu-action-btn a {
	font-weight: 700;
	font-family: var(--link-font-family);
	color: var(--white);
	background-color: var(--primary);
	line-height: 5em;
	padding: 0px 30px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

.header-area-two .menu-area .menu-action-btn a:hover {
	background-color: var(--black);
}

.header-area-two .menu-area .menu-action-btn a i {
	margin-left: 10px;
}

.sticky-menu {
	position: fixed;
	left: 0;
	margin: auto;
	top: 0;
	width: 100%;
	background-color: var(--white);
	animation: 700ms ease-in-out 0s normal none 1 running fadeInDown;
	box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
	border-radius: 0;
}

#header-fixed-height.active-height {
	display: block;
	height: 100px;
}

.header-area-two.sticky-menu .header-top {
	display: none;
}

/*=============================
	05. search header popup
===============================*/
.search-header-popup {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: rgba(23, 23, 23, 0.8);
	top: 0;
	left: 0;
	text-align: center;
	z-index: 9999;
	display: none;
}

.search-header-popup .close-search-popup {
	position: absolute;
	top: 50px;
	right: 50px;
}

.search-header-popup .close-search-popup .close-search-popup-btn {
	color: var(--white);
	font-size: 28px;
	background-color: transparent;
	border: 0;
}

.search-header-popup .search-field {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 800px;
	margin: 0 auto;
	width: 100%;
}

.search-header-popup .search-field input {
	width: 100%;
	height: 65px;
	border-radius: 5px;
	padding: 0 20px;
	border: 0;
	color: var(--black);
	font-size: 18px;
}

.search-header-popup .search-field .search-btn {
	background-color: var(--primary);
	border: 0;
	color: var(--white);
	width: 60px;
	height: 56px;
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 5px;
}

/*=============================
	06. offcanvas menu info start
===============================*/

.offcanvas-menu-info {
	width: 340px;
	padding: 30px;
	background-color: var(--white);
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	z-index: 99;
	overflow-y: auto;
	transform: translateX(100%);
	transition: var(--transision);
}

.offcanvas-menu-info .menu-close {
	font-size: 16px;
	width: 30px;
	height: 30px;
	border: 2px solid var(--primary);
	text-align: center;
	line-height: 27px;
	color: var(--primary);
	cursor: pointer;
	position: absolute;
	top: 20px;
	left: 20px;
	transition: var(--transision);
}

.offcanvas-menu-info .menu-close:hover {
	background-color: var(--primary);
	color: var(--white);
}

.offcanvas-menu-info .logo {
	margin-top: 40px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--primary);
	margin-bottom: 20px;
}

.offcanvas-menu-info .side-info .contact-list {
	margin-bottom: 24px;
}

.offcanvas-menu-info .side-info .contact-list h4 {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 5px;
}

.offcanvas-menu-info .side-info .contact-list a {
	color: var(--body-font-color);
}

.offcanvas-menu-info .side-info .contact-list a:hover {
	color: var(--primary);
}

.offcanvas-menu-info .social {
	margin-top: 10px;
}

.offcanvas-menu-info .social li {
	display: inline-block;
	margin-right: 10px;
}

.offcanvas-menu-info .social a {
	width: 30px;
	height: 30px;
	color: var(--white);
	text-align: center;
	line-height: 30px;
	border-radius: 5px;
	background-color: var(--primary);
}

.offcanvas-menu-info .social a:hover {
	background-color: var(--black);
	color: var(--white);
}

.offcanvas-menu-overlay {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(23, 23, 23, 0.7);
	z-index: 99;
	opacity: 0;
	visibility: hidden;
	transition: var(--transision);
}

.offcanvas-menu-info.active {
	transform: translateX(0);
}

.offcanvas-menu-overlay.active {
	opacity: 1;
	visibility: visible;
}

/*=============================
	07. Mobile Menu start
===============================*/

.mobile-menu-area {
	z-index: 99;
	background-color: var(--white);
	width: 100%;
	transition: all linear 0.2s;
}

.mobile-menu-area .mobile-topbar {
	width: 100%;
	background-color: var(--white);
	box-shadow: 0px 2px 50px rgba(0, 0, 0, 0.1);
	padding: 10px 0;
}

.mobile-menu-area .mobile-topbar .bars i {
	width: 40px;
	height: 40px;
	background-color: transparent;
	border: 2px solid var(--primary);
	color: var(--primary);
	font-size: 20px;
	text-align: center;
	line-height: 35px;
	border-radius: 3px;
	cursor: pointer;
	transition: var(--transision);
}

.mobile-menu-area .mobile-topbar .bars i:hover {
	background-color: var(--black);
	border-color: var(--black);
	color: var(--white);
}

.mobile-menu-area .mobile-topbar .icon i {
	width: 45px;
	height: 45px;
	background-color: var(--white);
	border-radius: 50%;
	text-align: center;
	line-height: 45px;
	font-size: 16px;
	cursor: pointer;
	transition: all linear 0.2s;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.mobile-menu-area .mobile-topbar .icon i:hover {
	background-color: var(--primary);
	color: var(--white);
	border-color: var(--primary);
}

.mobile-menu-area .mobile-menu-overlay {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
}

.mobile-menu-area .mobile-menu-main {
	width: 320px;
	height: 100%;
	background-color: var(--white);
	position: fixed;
	top: 0;
	right: -320px;
	z-index: 99;
	overflow-y: scroll;
	transition-duration: 0.3s;
}

.mobile-menu-area .mobile-menu-main .logo {
	padding: 20px;
}

.mobile-menu-area .mobile-menu-main .close-mobile-menu {
	position: absolute;
	top: 30px;
	right: 10px;
}

.mobile-menu-area .mobile-menu-main .close-mobile-menu i {
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	color: var(--black);
	font-size: 17px;
	cursor: pointer;
	transition: all linear 0.2s;
	transition: var(--transision);
}

.mobile-menu-area .mobile-menu-main .close-mobile-menu i:hover {
	color: var(--primary);
}

.mobile-menu-area .mobile-menu-main .menu-body .menu-list {
	padding-top: 10px;
}

.mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li a {
	font-weight: 500;
	color: var(--black);
	border-top: 1px solid var(--border-colour);
	width: 100%;
	padding: 0px 20px;
	line-height: 40px;
	padding-right: 10px;
	transition: all linear 0.2s;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li:last-child a {
	border-bottom: 1px solid var(--border-colour);
}

.mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li a:hover {
	color: var(--primary);
}

.mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li a i {
	width: 32px;
	height: 32px;
	background-color: var(--white);
	text-align: center;
	line-height: 32px;
	font-size: 12px;
	border-radius: 3px;
	background-color: var(--section-background);
	transition: all linear 0.2s;
}

.mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li a:hover i {
	background-color: var(--primary);
	color: var(--white);
}

.mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li ul {
	padding-left: 0;
	display: none;
}

.mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li ul a {
	padding: 0px 20px;
	padding-left: 40px;
}

.mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li ul li:last-child a {
	border-bottom: 0;
}

.mobile-menu-area .mobile-menu-main .menu-body .social-icon ul li {
	display: inline-block;
}

.mobile-menu-area .mobile-menu-main .social-icon {
	padding: 20px;
	text-align: center;
}

.mobile-menu-area .mobile-menu-main .social-icon ul li {
	display: inline-block;
	margin: 0 4px;
}

.mobile-menu-area .mobile-menu-main .social-icon ul li a {
	width: 36px;
	height: 36px;
	color: var(--black);
	text-align: center;
	line-height: 36px;
	border-radius: 3px;
	border: 1px solid var(--border-colour);
}

.mobile-menu-area .mobile-menu-main .social-icon ul li a:hover {
	background-color: var(--primary);
	color: var(--white);
	border-color: var(--primary);
}

.mobile-menu-overlay {
	transition-duration: 0.3s;
	visibility: hidden;
	opacity: 0;
}

.mobile-menu-overlay.active {
	visibility: visible;
	opacity: 1;
}

.mobile-menu-main.active {
	right: 0 !important;
}

.mobile-menu-area .mobile-menu-search {
	padding: 0 20px 16px;
}

.mobile-menu-area .mobile-menu-search input {
	width: 100%;
	height: 45px;
	border: 1px solid var(--border-colour);
	border-radius: 5px;
	padding: 0 20px;
	transition: var(--transision);
	background-color: var(--section-background);
}

.mobile-menu-area .mobile-menu-search input:focus {
	border-color: var(--black);
}

.mobile-menu-area .mobile-menu-search .input-groups button {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	background-color: transparent;
	border: 0;
}

.mobile-menu-area .menu-action-btn {
	padding: 20px;
}

.mobile-menu-area .menu-action-btn a {
	font-weight: 700;
	font-family: var(--link-font-family);
	color: var(--white);
	background-color: var(--primary);
	padding: 12px 30px;
	border-radius: 5px;
	width: 100%;
	text-align: center;
}

.mobile-menu-area .menu-action-btn a:hover {
	background-color: var(--black);
}

.mobile-menu-area .menu-action-btn a i {
	font-size: 14px;
	margin-left: 8px;
}

/*=============================
	08. Banner part
===============================*/

/* banner part one */
.banner-area-one {
	min-height: calc(100vh - 100px);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: contain;
	background-color: var(--white);
	position: relative;
}

.banner-area-one .banner-shape {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	object-fit: cover;
	width: 54%;
}

.banner-area-one .banner-shape .primary-colour {
	fill: var(--primary);
}

.banner-area-one .banner-shape .black-colour {
	fill: var(--black);
}

.banner-area-one .banner-title {
	font-size: 68px;
	font-weight: 700;
	margin-bottom: 10px;
	line-height: 115%;
}

.banner-area-one .sub-title {
	font-size: 18px;
	color: var(--primary);
	font-family: var(--heading-font-family);
	font-weight: 700;
	margin-bottom: 10px;
	position: relative;
	letter-spacing: 4px;
}

.banner-area-one .banner-info {
	max-width: 550px;
	padding-top: 100px;
	padding-bottom: 100px;
}

.banner-area-one .banner-info p {
	margin-top: 20px;
	margin-right: 30px;
}

.banner-area-one .common-btn {
	margin-top: 34px;
}

.banner-area-one .banner-image {
	position: relative;
	width: 800px;
	height: calc(100vh - 100px);
}

.banner-area-one .banner-image img {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 40px;
}

/* banner part two */
.banner-area-two {
	min-height: 100vh;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.banner-area-two .overlay {
	width: 100%;
	background-color: rgba(23, 23, 23, 0.7);
	padding-top: 318px;
	padding-bottom: 155px;
	min-height: 100vh;
	position: relative;
}

.banner-area-two .overlay::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60%;
	background: linear-gradient(180deg, rgba(0, 48, 216, 0) 0%, #0030d8 248.68%);
	content: "";
}

.banner-area-two .banner-info {
	position: relative;
	z-index: 9;
}

.banner-area-two .banner-title {
	font-size: 90px;
	font-weight: 700;
	line-height: 115%;
	color: var(--white);
}

.banner-area-two .sub-title {
	font-size: 18px;
	color: var(--primary);
	font-family: var(--heading-font-family);
	font-weight: 700;
	margin-bottom: 10px;
	position: relative;
	letter-spacing: 4px;
}

.banner-area-two .banner-info p {
	color: var(--white);
	font-size: 18px;
}

.banner-area-two .banner-info .common-btn {
	margin-top: 59px;
}


/*=============================
	09. About us part
===============================*/

/* about area one */
.about-us-area-one {
	padding-top: 120px;
	background-color: var(--section-background);
}

.about-us-area-one.without-bg {
	background-color: transparent;
}

.about-us-area-one .section-title-one {
	max-width: 598px;
	margin-bottom: 20px;
}

.about-us-area-one .image {
	position: relative;
}

.about-us-area-one .image img {
	clip-path: polygon(0 0, calc(100% - 120px) 0, 100% 100%, 120px 100%);
	margin-left: -150px;
}

.about-us-area-one .active-customer {
	width: 303px;
	background-color: var(--white);
	box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05);
	border-radius: 5px;
	padding: 13px 22px;
	position: absolute;
	right: -35px;
	bottom: 32px;
}

.about-us-area-one.without-bg .active-customer {
	border: 1px solid var(--border-colour);
	width: 305px;
}

.about-us-area-one .active-customer .icon {
	margin-right: 14px;
}

.about-us-area-one .active-customer .number {
	font-size: 48px;
}

.about-us-area-one .about-info {
	max-width: 648px;
	margin-top: 27px;
}

.about-us-area-one .about-list {
	margin-top: 60px;
}

.about-us-area-one .about-list-items {
	margin-bottom: 30px;
}

.about-us-area-one .about-list-items:last-child {
	margin-bottom: 0px;
	margin-left: 45px;
}

.about-us-area-one .about-list .about-list-items .icon {
	flex-basis: 30px;
}

.about-us-area-one .about-list .about-list-items .icon i {
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	border-radius: 50%;
	color: var(--white);
	background-color: var(--primary);
	margin-right: 18px;
}

.about-us-area-one .about-list .about-list-items .text .title {
	font-size: 24px;
}

.about-us-area-one .about-list .about-list-items .text p {
	margin-top: 10px;
}

/* about area two */
.about-area-two {
	padding-top: 60px;
}

.about-area-two .section-title-one {
	margin-bottom: 20px;
}

.about-area-two .about-image-one {
	position: relative;
	width: 862px;
	margin-left: -307px;
}

.about-area-two .about-image-two {
	max-width: 428px;
	margin-right: 30px;
	margin-left: auto;
	margin-top: -290px;
	position: relative;
}

.about-area-two .about-image-two .experiance-outside {
	width: 170px;
	height: 170px;
	background-color: var(--white);
	border-radius: 50%;
	position: absolute;
	top: -82px;
	left: -60px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.about-area-two .about-image-two .experiance-box {
	width: 162px;
	height: 162px;
	background-color: var(--primary);
	border-radius: 50%;
	padding: 30px;
	text-align: center;
	position: relative;
}

.about-area-two .about-image-two .experiance-box::after {
	width: 140px;
	height: 140px;
	content: "";
	border-radius: 50%;
	border: 2px dashed var(--white);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


.about-area-two .about-image-two .experiance-box .year {
	font-size: 48px;
	color: var(--white);
}

.about-area-two .about-image-two .experiance-box .experiance {
	font-size: 18px;
	color: var(--white);
	margin-top: -8px;
	line-height: 25px;
}

.about-area-two .about-text {
	margin-top: 100px;
}

.about-area-two .about-details .list-info {
	margin-top: 30px;
}

.about-area-two .about-details .list-info ul li {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.about-area-two .about-details .list-info ul li:last-child {
	margin-bottom: 0;
}

.about-area-two .about-text .list-info ul li i {
	margin-right: 10px;
	color: var(--primary);
	font-size: 24px;
}

.about-area-two .about-text .list-info ul li h6 {
	font-size: 18px;
}

/*=============================
	10. our services part
===============================*/

/* service part one */

.services-area-one {
	padding-top: 120px;
	padding-bottom: 120px;
	background-color: var(--section-background);
}

.service-item-one-column {
	border-top: 1px solid var(--border-colour);
	margin-top: 10px;
	padding-top: 10px;
}

.service-item-one-column:last-child {
	border-bottom: 1px solid var(--border-colour);
	margin-bottom: 10px;
	padding-bottom: 10px;
}

.service-item-one .image {
	border-radius: 5px;
	overflow: hidden;
}

.service-item-one .service-title .title {
	font-size: 24px;
}

.service-item-one .service-title .title:hover {
	color: var(--primary);
}

.service-item-one .read-more .common-btn {
	margin-top: 0;
}

/* service part two */

.service-area-two {
	padding-top: 120px;
}

.service-area-two .section-title-one .sub-title {
	margin-left: 0;
}

.services-item-two {
	border-radius: 5px;
	margin-bottom: 60px;
}

.services-item-two .image {
	border-radius: 5px;
	width: 88%;
	margin: 0 auto;
	margin-bottom: -100px;
	position: relative;
	z-index: 9;
}

.services-item-two .image img {
	border-radius: 5px;
}

.services-item-two .text {
	padding: 30px;
	background-color: var(--white);
	padding-top: 130px;
	border: 1px solid var(--border-colour);
	border-radius: 5px;
	transition: var(--transision);
}

.services-item-two .image .icon {
	background-color: var(--primary);
	width: 60px;
	height: 60px;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: -20px;
	right: 30px;
	transition: var(--transision);
}

.services-item-two .text .title {
	font-size: 24px;
	margin-bottom: 20px;
}

.services-item-two .text .title:hover {
	color: var(--primary);
}

.services-item-two .text .read-more {
	font-weight: 700;
	font-family: var(--link-font-family);
	color: var(--black);
	margin-top: 40px;
}

.services-item-two .text .read-more i {
	margin-left: 10px;
	color: var(--primary);
	font-size: 14px;
}

.services-item-two .text .read-more:hover {
	color: var(--primary);
}

.services-item-two:hover .text {
	border-color: var(--primary);
	box-shadow: none;
}

.services-item-two:hover .image .icon {
	background-color: var(--black);
}


/* servcies list part*/
.all-services-area {
	padding: 120px 0 60px 0;
}

.all-services-item {
	border-radius: 5px;
	margin-bottom: 60px;
}

.all-services-item .image {
	border-radius: 5px;
	width: 88%;
	margin: 0 auto;
	margin-bottom: -100px;
	position: relative;
	z-index: 9;
}

.all-services-item .image img {
	border-radius: 5px;
}

.all-services-item .text {
	padding: 30px;
	background-color: var(--white);
	box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.07);
	padding-top: 130px;
	border: 1px solid transparent;
	border-radius: 5px;
	transition: var(--transision);
}

.all-services-item .image .icon {
	background-color: var(--black);
	width: 60px;
	height: 60px;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: -20px;
	right: 30px;
	transition: var(--transision);
}

.all-services-item .text .title {
	font-size: 24px;
	margin-bottom: 20px;
}

.all-services-item .text .title:hover {
	color: var(--primary);
}

.all-services-item .text .read-more {
	font-weight: 700;
	font-family: var(--link-font-family);
	color: var(--black);
	margin-top: 40px;
}

.all-services-item .text .read-more i {
	margin-left: 10px;
}

.all-services-item .text .read-more:hover {
	color: var(--primary);
}

.all-services-item:hover .text {
	border-color: var(--primary);
	box-shadow: none;
}

.all-services-item:hover .image .icon {
	background-color: var(--primary);
}


/* service details part */

.service-details-area {
	padding: 120px 0;
}

.service-details-area .service-details-content .service-details-image {
	border-radius: 5px;
	overflow: hidden;
}

.service-details-area .service-details-content .service-details-title {
	font-size: 48px;
	margin: 30px 0 20px 0;
}

.service-details-area .service-inner-details {
	margin-top: 30px;
	margin-bottom: 30px;
}

.service-details-area .service-inner-details .service-info-item {
	padding: 30px;
	border: 1px solid var(--border-colour);
	border-radius: 5px;
}

.service-details-area .service-inner-details .service-info-item .icon {
	margin-bottom: 20px;
}

.service-details-area .service-inner-details .service-info-item .title {
	font-size: 24px;
	margin-bottom: 10px;
}

.service-details-area .expertise-block {
	margin-top: 60px;
}

.service-details-area .expertise-block .expertise-title {
	font-size: 32px;
	margin-bottom: 20px;
}

.service-details-area .expertise-block .expertise-main {
	margin-top: 45px;
	margin-bottom: 30px;
}

.service-details-area .expertise-main .expertise-item {
	box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05);
	background-color: var(--white);
	border-radius: 5px;
	position: relative;
	padding: 40px 28px 40px 40px;
}

.service-details-area .expertise-main .expertise-item .icon {
	margin-right: 20px;
}

.service-details-area .expertise-block .expertise-main .expertise-item .title {
	font-size: 24px;
	width: 118px;
}

.service-details-area .expertise-block .expertise-main .expertise-item .number {
	font-size: 32px;
	position: absolute;
	top: 50%;
	right: 55px;
	transform: translateY(-50%);
	color: var(--white);
	z-index: 9;
	width: 33px;
	text-align: center;
}

.service-details-area .expertise-block .expertise-main .expertise-item .number::before {
	position: absolute;
	bottom: -51px;
	right: -30px;
	width: 88px;
	height: 155px;
	background-color: var(--primary);
	content: "";
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	z-index: -1;
}

.service-details-area .service-right-sidebar {
	background-color: var(--white);
	box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05);
	border-radius: 5px;
	padding: 31px 54px 39px 44px;
}

.service-details-area .service-right-sidebar .service-sidebar-title {
	font-size: 32px;
}

.service-details-area .service-right-sidebar .sub-title {
	color: #333F4D;
	margin-bottom: 13px;
}

.service-details-area .service-right-sidebar .project-block {
	margin-top: 33px;
}

.service-details-area .service-right-sidebar .project-block .title {
	font-size: 18px;
	margin-bottom: 13px;
}

.service-details-area .service-right-sidebar .project-block .list-info {
	margin-top: 16px;
}

.service-details-area .service-right-sidebar .project-block .list-info li {
	color: var(--body-font-color);
	margin-bottom: 12px;
	display: flex;
}

.service-details-area .service-right-sidebar .project-block .list-info li i {
	position: relative;
	top: 7px;
}

.service-details-area .service-right-sidebar .project-block .list-info li:last-child {
	margin-bottom: 0;
}

.service-details-area .service-right-sidebar .project-block .list-info li i {
	margin-right: 10px;
	color: var(--primary);
}

.service-details-area .service-right-sidebar .project-block .request-service-btn {
	color: var(--white);
	font-weight: 700;
	padding: 14px 30px;
	background-color: var(--primary);
	border-radius: 5px;
	font-family: var(--link-font-family);
	margin-top: 39px;
}

.service-details-area .service-right-sidebar .project-block .request-service-btn:hover {
	background-color: var(--black);
}

/*=============================
	11. Recent work part
===============================*/
/* work area one */
.recent-work-area-one .recent-work-one-bg {
	position: relative;
	padding-top: 120px;
}

.recent-work-area-one .recent-work-one-bg::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 60%;
	background-color: var(--black);
	content: "";
	z-index: -1;
}

.recent-work-area-one .container-fluid {
	padding: 0 40px;
}

.recent-work-area-one .project-item-one .image {
	overflow: hidden;
	border-radius: 5px;
}

.recent-work-area-one .project-item-one .info {
	background-color: rgba(23, 23, 23, 0.9);
	padding: 30px;
	transition: var(--transision);
	transform: translateY(100%);
}

.recent-work-area-one .project-item-one .info .text .title {
	color: var(--white);
	font-size: 28px;
}

.recent-work-area-one .project-item-one .info .text .title:hover a {
	color: var(--primary);
}

.recent-work-area-one .project-item-one .info .text p {
	margin-top: 5px;
	color: var(--white);
}

.recent-work-area-one .project-item-one .info .plus a {
	width: 50px;
	height: 50px;
	color: var(--white);
	font-size: 20px;
	text-align: center;
	line-height: 50px;
	border-radius: 5px;
	background-color: var(--primary);
	transition: var(--transision);
}

.recent-work-area-one .project-item-one .info .plus a i {
	font-size: 18px;
}

.recent-work-area-one .project-item-one .info .plus a:hover {
	background-color: var(--white);
	color: var(--black);
}

.recent-work-area-one .project-item-one:hover .info {
	transform: translateY(0);
}

.recent-work-slider-one .project-item-one {
	margin: 0 15px;
}

.recent-work-slider-one .icon {
	width: 60px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	border-radius: 50%;
	color: var(--white);
	background-color: rgba(0, 48, 216, 0.1);
	cursor: pointer;
	transition: var(--transision);
	position: absolute;
	top: -120px;
	z-index: 9;
}

.recent-work-slider-one .icon.right {
	right: 284px;
}

.recent-work-slider-one .icon.left {
	left: calc(100% - 428px);
}

.recent-work-slider-one .icon:hover {
	background-color: var(--primary);
	color: var(--white);
}

/* work area two */
.recent-work-area-two {
	padding-top: 120px;
}

.project-area {
	padding: 120px 0;
}

.projects-main {
	gap: 30px;
}

.projects-main .project-image {
	border-radius: 5px;
	overflow: hidden;
}

.projects-main .project-image img {
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.projects-main .project-image:first-child {
	width: 300px;
	height: 487px;
}

.projects-main .project-image:nth-child(2) {
	width: 630px;
	height: 487px;
}

.projects-main .project-image:nth-child(3) {
	width: 300px;
	height: 487px;
}

.projects-main .project-image:nth-child(4) {
	width: 630px;
	height: 317px;
}

.projects-main .project-image:nth-child(5) {
	width: 630px;
	height: 317px;
}

.projects-main .project-image .project-info {
	background-color: rgba(0, 48, 216, 0.9);
	transition: var(--transision);
	padding: 40px;
	transform: translateY(100%);
}

.projects-main .project-image .project-info .title {
	font-size: 28px;
	font-weight: 700;
	color: var(--white);
	font-family: var(--link-font-family);
}

.projects-main .project-image .project-info p {
	color: var(--white);
	margin-top: 5px;
}

.projects-main .project-image .project-info:hover {
	background-color: rgba(23, 23, 23, 0.9);
}

.projects-main .project-image .project-info .title:hover {
	color: var(--primary);
}

.projects-main .project-image:hover .project-info {
	transform: translateY(0);
}

/* work details */

.project-details-area {
	padding: 120px 0;
}

.project-details-area .project-details-thumb-image {
	border-radius: 5px;
	position: relative;
}

.project-details-area .project-details-thumb-image img {
	border-radius: 5px;
}

.project-details-area .project-information {
	width: 410px;
	position: absolute;
	bottom: 0;
	right: 0;
	border-radius: 5px;
	overflow: hidden;
	border-bottom-left-radius: 0;
	background-color: var(--white);
	border: 1px solid var(--border-colour);
	border-top: 0;
	border-left: 0;
}

.project-details-area .project-information .project-title {
	font-size: 32px;
	color: var(--white);
	background-color: var(--primary);
	text-align: center;
	padding: 30px;
}

.project-details-area .project-information .main-content {
	padding: 40px;
	padding-top: 10px;
}

.project-details-area .project-information .info-main {
	display: flex;
	flex-wrap: wrap;
}

.project-details-area .project-information .info-item {
	border-bottom: 1px solid var(--border-colour);
	padding: 20px 0;
	width: 50%;
	padding-right: 15px;
}

.project-details-area .project-information .info-item:nth-child(even) {
	padding-right: 0;
	padding-left: 15px;
}

.project-details-area .project-information .info-main .info-subtitle {
	font-size: 18px;
	margin-bottom: 10px;
}

.project-details-area .project-information .rating {
	margin-top: 20px;
}

.project-details-area .project-information .rating-title {
	font-size: 18px;
	margin-right: 10px;
}

.project-details-area .project-information .rating .star i {
	font-size: 14px;
	color: var(--primary);
}

.project-details-area .project-information .social-icon {
	margin-top: 20px;
}

.project-details-area .project-information .social-icon li {
	display: inline-block;
	margin: 0 5px;
}

.project-details-area .project-information .social-icon a {
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	background-color: var(--black);
	border-radius: 50%;
	font-size: 14px;
	color: var(--white);
}

.project-details-area .project-information .social-icon a:hover {
	background-color: var(--primary);
}

.project-details-area .project-details-information {
	margin-top: 30px;
}

.project-details-area .project-details-information .project-details-title {
	font-size: 48px;
	margin-bottom: 30px;
}

.project-details-area .project-details-information p {
	margin-bottom: 20px;
}

.project-details-area .project-inner-image {
	margin: 60px 0;
}

.project-details-area .project-inner-image .img {
	border-radius: 5px;
	overflow: hidden;
}

.project-details-area .project-list-info .title {
	font-size: 32px;
	margin-bottom: 20px;
}

.project-details-area .project-list-info ul {
	margin-bottom: 30px;
}

.project-details-area .project-list-info ul li {
	margin-bottom: 15px;
	font-size: 18px;
	font-weight: 700;
	display: flex;
	align-items: center;
}

.project-details-area .project-list-info ul li i {
	color: var(--primary);
	margin-right: 10px;
}

.project-details-area .project-list-info p {
	margin-bottom: 0;
}

.project-details-area .pagination {
	margin-top: 60px;
	border-top: 1px solid var(--border-colour);
	border-bottom: 1px solid var(--border-colour);
	padding: 30px 0;
}

.project-details-area .pagination ul {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.project-details-area .pagination ul li a {
	color: var(--black);
	font-weight: 500;
}

.project-details-area .pagination ul li.prev a {
	color: var(--body-font-color);
}

.project-details-area .pagination ul li.prev a i {
	margin-right: 10px;
}

.project-details-area .pagination ul li.next a i {
	margin-left: 10px;
}

.project-details-area .pagination ul li a:hover {
	color: var(--primary)
}

/*=============================
	12. counter part start
===============================*/

/* counter area one */
.counter-area-one {
	padding-top: 120px;
}

.counter-one-item {
	background-color: var(--white);
	box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05);
	padding: 22px 44px;
	border-radius: 5px;
	border-left: 2px solid var(--primary);
}

.without-shadow-counter {
	box-shadow: none;
	border-left: 1px solid rgba(23, 23, 23, 0.4);
	border-radius: 0;
}

.counter-coloumn:first-child .without-shadow-counter {
	border-left: 0;
}

.counter-one-item .icon {
	margin-right: 20px;
}

.counter-one-item .info .counter-number {
	font-size: 48px;
	line-height: 1;
}

.counter-one-item .info p {
	margin: 0 0;
}

/* counter area two */
.counter-area-two {
	margin-top: -78px;
}

.counter-two-item {
	background-color: var(--primary);
	padding: 33px 20px 33px 35px;
	border-radius: 5px;
	border-left: 2px solid var(--primary);
}

.counter-two-item .info {
	margin-right: 50px;
}

.counter-two-item .icon {
	width: 80px;
	height: 80px;
	background-color: var(--white);
	display: flex;
	margin-left: auto;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
	padding: 10px;
	position: relative;
	z-index: 9;
}

.counter-two-item .icon::before {
	width: 90px;
	height: 90px;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 5px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	content: "";
	z-index: -1;
}

.counter-two-item .info .counter-number {
	font-size: 48px;
	color: var(--white);
}

.counter-two-item .info p {
	color: var(--white);
}

/*=============================
	13. Active employes part
===============================*/

/* active employee one */
.active-employes-area-one {
	padding-top: 120px;
}

.active-employes-slider .active-employes-item-one {
	margin: 0 15px;
}

.active-employes-slider .slick-list {
	padding: 20px 0;
	margin: -20px 0;
}

.active-employes-item-one {
	border-radius: 5px;
}

.active-employes-item-one .image {
	border-radius: 5px;
	overflow: hidden;
	width: 88%;
	margin: 0 auto;
	margin-bottom: -100px;
	position: relative;
	z-index: 9;
}

.active-employes-item-one .text {
	padding: 30px;
	background-color: var(--white);
	box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.07);
	padding-top: 130px;
}

.active-employes-item-one .text .social-icon {
	margin-bottom: 30px;
}

.active-employes-item-one .text .social-icon li {
	display: inline-block;
	margin: 0 12px;
}

.active-employes-item-one .text .social-icon i {
	width: 35px;
	height: 35px;
	color: var(--black);
	text-align: center;
	line-height: 35px;
	border-radius: 5px;
	background-color: #F3F3F3;
	transition: var(--transision);
}

.active-employes-item-one .text .social-icon i:hover {
	background-color: var(--primary);
	color: var(--white);
}

.active-employes-item-one .text .employee-title {
	font-size: 24px;
}

.active-employes-item-one .text .employee-title:hover {
	color: var(--primary);
}

.active-employes-item-one .text p {
	margin-top: 5px;
}

.active-employes-slider .slick-dots {
	list-style: none;
	margin-top: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.active-employes-slider .slick-dots li {
	display: inline-block;
	margin: 0 8px;
}

.active-employes-slider .slick-dots li button {
	font-size: 0;
	list-style: none;
	width: 10px;
	height: 10px;
	border: 0;
	border-radius: 50%;
	background-color: var(--primary);
	position: relative;
}

.active-employes-slider .slick-dots li button::before {
	width: 24px;
	height: 24px;
	border: 2px solid var(--primary);
	border-radius: 50%;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: var(--transision);
}

.active-employes-slider .slick-dots .slick-active button::before {
	opacity: 1;
}

/* active employee two */

.active-employee-area-two {
	padding-top: 120px;
}

.active-employee-area-two .employee-info .team-member {
	font-size: 60px;
	font-weight: 700;
	line-height: 115%;
	margin-top: 70px;
	-webkit-text-stroke: 1px #F68B21;
	-webkit-text-fill-color: white;
}

.active-employes-slider-two {
	margin-right: -460px;
}

.active-employee-area-two .section-title-one {
	margin-bottom: 20px;
}

.active-employes-item-two {
	border-radius: 5px;
	margin: 0 15px;
	background-color: var(--white);
	border: 1px solid var(--border-colour);
	transition: var(--transision);
}

.active-employes-item-two:hover {
	border-color: var(--primary);
}

.active-employes-item-two .image {
	border-radius: 5px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	overflow: hidden;
	margin: -1px -1px 0;
}

.active-employes-item-two .text {
	padding: 30px;
	position: relative;
	transition: var(--transision);
}

.active-employes-item-two .text .social-icon {
	background-color: var(--primary);
	padding: 20px 30px;
	border-radius: 5px;
	position: absolute;
	width: 290px;
	top: -75px;
	left: 50%;
	transform: translateX(-50%);
	visibility: hidden;
	opacity: 0;
	transition: var(--transision);
}

.active-employes-item-two .text .social-icon li {
	display: inline-block;
	margin: 0 5px;
}

.active-employes-item-two .text .social-icon li:first-child {
	display: inline-block;
	margin-left: 0;
}

.active-employes-item-two .text .social-icon li:last-child {
	margin-right: 0;
}

.active-employes-item-two .text .social-icon i {
	width: 35px;
	height: 35px;
	color: var(--white);
	border: 1px solid var(--white);
	text-align: center;
	line-height: 35px;
	border-radius: 5px;
	background-color: transparent;
	transition: var(--transision);
}

.active-employes-item-two .text .social-icon i:hover {
	background-color: var(--white);
	color: var(--primary);
	border-color: var(--primary);
}

.active-employes-item-two .text .employee-title {
	font-size: 24px;
}

.active-employes-item-two .text .employee-title:hover {
	color: var(--primary);
}

.active-employes-item-two .text p {
	margin-top: 5px;
}

.active-employes-item-two:hover .text {
	padding-top: 57px;
}

.active-employes-item-two:hover .text .social-icon {
	visibility: visible;
	opacity: 1;
	top: -37px;
}

.active-employes-slider-two .slick-dots {
	list-style: none;
	margin-top: 40px;
	margin-left: 165px;
}

.active-employes-slider-two .slick-dots li {
	display: inline-block;
	margin: 0 8px;
}

.active-employes-slider-two .slick-dots li button {
	font-size: 0;
	list-style: none;
	width: 10px;
	height: 10px;
	border: 0;
	border-radius: 50%;
	background-color: var(--primary);
	position: relative;
}

.active-employes-slider-two .slick-dots li button::before {
	width: 24px;
	height: 24px;
	border: 2px solid var(--primary);
	border-radius: 50%;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: var(--transision);
}

.active-employes-slider-two .slick-dots .slick-active button::before {
	opacity: 1;
}

/* all team part */
.all-team-area-part {
	padding: 120px 0;
}

.all-team-area-part .active-employes-item-one .text {
	box-shadow: none;
	border: 1px solid var(--border-colour);
}

.all-team-area-slider .slick-dots {
	list-style: none;
	margin-top: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.all-team-area-slider .slick-dots li {
	display: inline-block;
	margin: 0 8px;
}

.all-team-area-slider .slick-dots li button {
	font-size: 0;
	list-style: none;
	width: 10px;
	height: 10px;
	border: 0;
	border-radius: 50%;
	background-color: var(--primary);
	position: relative;
}

.all-team-area-slider .slick-dots li button::before {
	width: 24px;
	height: 24px;
	border: 2px solid var(--primary);
	border-radius: 50%;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: var(--transision);
}

.all-team-area-slider .slick-dots .slick-active button::before {
	opacity: 1;
}

/* employee details part*/

.team-details-area {
	padding: 120px 0;
}

.team-details-area .team-image {
	border-radius: 5px;
	overflow: hidden;
}

.team-details-area .team-details {
	border-radius: 5px;
	overflow: hidden;
}

.team-details-area .team-details .title {
	font-size: 48px;
	margin-bottom: 5px;
}

.team-details-area .team-details .description {
	margin-top: 20px;
}

.team-details-area .team-details .team-info-block {
	margin-top: 33px;
}

.team-details-area .team-details .info-item {
	margin-bottom: 20px;
}

.team-details-area .team-details .info-item .info-title {
	font-size: 18px;
}

.team-details-area .team-details .social-icon {
	margin-top: 10px;
}

.team-details-area .team-details .social-icon a {
	width: 39px;
	height: 39px;
	border-radius: 50%;
	text-align: center;
	line-height: 39px;
	font-size: 24px;
	color: var(--white);
	margin-right: 15px;
}

.team-details-area .team-details .social-icon a:first-child {
	background-color: #4676ED;
}

.team-details-area .team-details .social-icon a:nth-child(2) {
	background-color: #C40027;
}

.team-details-area .team-details .social-icon a:nth-child(3) {
	background-color: #4467AD;
}

.team-details-area .team-details .social-icon a:nth-child(4) {
	background-color: #5A99EC;
}

.team-details-area .technical-information {
	margin-top: 60px;
}

.team-details-area .technical-information .details .title {
	font-size: 24px;
	margin-bottom: 20px;
}

.team-details-area .technical-information .skills .title {
	font-size: 24px;
	margin-bottom: 20px;
}

.team-details-area .technical-information .skills .progress-title {
	font-size: 18px;
	margin-bottom: 10px;
}

.team-details-area .technical-information .skills .progress-item+.progress-item {
	margin-top: 30px;
}

.progress-wrap {
	overflow: hidden;
}

.progress-item .progress {
	height: 6px;
	background-color: var(--section-background);
	border-radius: 8px;
	position: relative;
	overflow: inherit;
}

.progress-item .progress-bar {
	background-color: var(--primary);
	overflow: inherit;
	border-radius: 8px;
}

.progress-item .progress span {
	display: block;
	position: absolute;
	right: 0px;
	bottom: 10px;
	color: var(--body-font-color);
	font-size: var(--body-font-size);
}

/*=============================
	14. Get updates part
===============================*/

/* get updates area one */
.get-updates-area-one {
	padding-top: 120px;
}

.get-updates-area-one .update-area-bg-one {
	background-color: var(--black);
	padding: 40px 0;
	position: relative;
}

.get-updates-area-one .update-area-bg-one::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background-color: var(--primary);
	content: "";
	clip-path: polygon(0 0, calc(100% - 90px) 0, 100% 100%, 0% 100%);
}

.get-updates-area-one .update-area-bg-one .get-updates-info {
	position: relative;
	z-index: 9;
}

.get-updates-area-one .update-area-bg-one .get-updates-info .title {
	font-size: 48px;
}

.get-updates-area-one .update-area-bg-one .get-updates-info p {
	margin-top: 10px;
}

.get-updates-area-one .update-area-bg-one .contact-info .icon i {
	width: 88px;
	height: 88px;
	text-align: center;
	line-height: 88px;
	border-radius: 50%;
	font-size: 40px;
	color: var(--white);
	background-color: var(--primary);
	margin-right: 30px;
	transition: var(--transision);
}

.get-updates-area-one .update-area-bg-one .contact-info .text .title {
	color: var(--white);
	font-size: 24px;
}

.get-updates-area-one .update-area-bg-one .contact-info .text .number {
	color: var(--white);
	font-size: 32px;
	margin-top: 10px;
}

.get-updates-area-one .update-area-bg-one .contact-info .text h3:hover {
	color: var(--primary);
}

.get-updates-area-one .update-area-bg-one .contact-info:hover .icon i {
	background-color: var(--white);
	color: var(--primary);
}

/* get updates area two */
.get-updates-area-two {
	padding-top: 120px;
}

.get-updates-area-two .get-updates-area-bg {
	background-color: var(--black);
	padding: 95px 0 180px 0;
}

.get-updates-area-two .get-updates-area-bg .section-title-one {
	padding-left: 70px;
	margin-bottom: 0;
}

.get-updates-area-two .sent-email-box {
	padding-left: 60px;
}

.get-updates-area-two .sent-email-box .input-group {
	width: 413px;
}

.get-updates-area-two .sent-email-box input {
	height: 60px;
	width: 100%;
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--white);
	color: var(--white);
}

.get-updates-area-two .sent-email-box input::placeholder {
	opacity: 1;
}

.get-updates-area-two .sent-email-box .input-group i {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	color: var(--white);
}

.get-updates-area-two .sent-email-box .submit-btn {
	margin-left: 40px;
	color: var(--white);
	font-weight: 700;
	padding: 14px 38px;
	background-color: transparent;
	border: 1px solid var(--white);
	border-radius: 5px;
	margin-top: 40px;
	font-family: var(--link-font-family);
}

.get-updates-area-two .sent-email-box .submit-btn:hover {
	background-color: var(--primary);
	border-color: var(--primary);
}

.get-updates-area-two .sent-email-box .submit-btn i {
	margin-left: 10px;
	font-size: 14px;
}


/*=============================
	15. working process part start
===============================*/

/* working process one */
.working-process-area-one {
	padding-top: 120px;
}

.working-process-area-one .section-title-one {
	margin-bottom: 20px;
	max-width: 550px;
}

.working-process-area-one .working-process-info {
	max-width: 550px;
}

.working-process-item {
	box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05);
	background-color: var(--white);
	padding: 40px;
	margin-bottom: 68px;
	position: relative;
}

.working-process-item:last-child {
	margin-bottom: 0;
}

.working-process-item .title {
	margin-left: 20px;
	width: 160px;
}

.working-process-item .title h4 {
	font-size: 24px;
}

.working-process-item .number h3 {
	color: rgba(23, 23, 23, 0.2);
}

.working-process-item:nth-child(odd)::before {
	position: absolute;
	top: 100%;
	right: 94px;
	width: 315px;
	height: 64px;
	background-image: url(../img/working-process/shape-for-odd.png);
	content: "";
}

.working-process-item:nth-child(even) {
	flex-direction: row-reverse;
}

.working-process-item:nth-child(even)::before {
	position: absolute;
	top: 100%;
	right: 94px;
	width: 315px;
	height: 64px;
	background-image: url(../img/working-process/shape-for-even.png);
	content: "";
}

.working-process-item:nth-child(odd):last-child:before {
	display: none;
}

.working-process-item:nth-child(even):last-child:before {
	display: none;
}

/* working process item two */

.working-process-item-two {
	padding: 0px 40px;
	margin-bottom: 53px;
	position: relative;
}

.working-process-item-two:last-child {
	margin-bottom: 0;
}

.working-process-item-two .title {
	margin-left: 20px;
	width: 160px;
}

.working-process-item-two .number {
	width: 88px;
	height: 155px;
	background: var(--section-background);
	display: flex;
	justify-content: center;
	align-items: center;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	position: relative;
}

.working-process-item-two .number::before {
	width: 104px;
	height: 15px;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	background-color: var(--section-background);
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	content: "";
}


.working-process-item-two:nth-child(odd)::before {
	position: absolute;
	top: 100%;
	right: 94px;
	width: 315px;
	height: 64px;
	background-image: url(../img/working-process/shape-for-odd.png);
	content: "";
}

.working-process-item-two:nth-child(even) {
	flex-direction: row-reverse;
}

.working-process-item-two:nth-child(even)::before {
	position: absolute;
	top: 100%;
	right: 94px;
	width: 315px;
	height: 64px;
	background-image: url(../img/working-process/shape-for-even.png);
	content: "";
}

.working-process-item-two:nth-child(odd):last-child:before {
	display: none;
}

.working-process-item-two:nth-child(even):last-child:before {
	display: none;
}


/*=============================
	16. faq part start
===============================*/
.faq-area-one {
	padding-top: 120px;
}

.faq-area-one .section-title-one {
	margin-bottom: 30px;
}


.faq-area-one .faq-body .accordion-button:focus {
	box-shadow: none;
}

.faq-area-one .faq-body .accordion-item {
	border-radius: 5px;
	margin-bottom: 30px;
	border: 1px solid var(--border-colour);
}

.faq-area-one .faq-body .accordion-button:not(.collapsed) {
	background-color: transparent;
	box-shadow: none;
}

.faq-area-one .faq-body .accordion-button {
	border-radius: 5px;
	border-bottom: 1px solid transparent;
	padding: 26px 24px;
	position: relative;
	font-size: 18px;
	font-weight: var(--heading-font-weight);
    color: var(--heading-font-color);
}

.faq-area-one .faq-body .accordion-body {
	padding: 11px 24px !important;
}

.faq-area-one .faq-body .accordion-button:not(.collapsed) {
	border-color: var(--border-colour);
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.faq-area-one .faq-body .accordion-button:focus {
	border-color: var(--border-colour) !important;
	box-shadow: none !important;
}

.faq-area-one .faq-body .accordion-button::after {
	background-image: url(../img/icons/plus-icon.svg);
	background-repeat: no-repeat;
	background-position: center;
	width: 40px;
	height: 40px;
	background-color: var(--primary);
	border-radius: 5px;
	transform: unset;
	position: absolute;
	right: -20px;
}

.faq-area-one .faq-body .accordion-button:not(.collapsed)::after {
	background-image: url(../img/icons/minus-icon.svg);
}

.faq-area-one .faq-image .image-one {
	border-radius: 5px;
	position: relative;
	max-width: 401px;
}

.faq-area-one .faq-image .image-one img {
	border-radius: 5px;
}

.faq-area-one .faq-image .image-one::after {
	width: 22px;
	height: 278px;
	position: absolute;
	right: -34px;
	top: 48px;
	background-color: var(--primary);
	content: "";
	border-radius: 5px;
}

.faq-area-one .faq-image .image-two {
	width: 432px;
	height: 284px;
	-webkit-mask-image: url("../img/faqs/image-two-shape.svg");
	mask-image: url("../img/faqs/image-two-shape.svg");
	-webkit-mask-position: top left;
	mask-position: top left;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	margin-left: 80px;
	margin-top: -160px;
}

.faq-area-one .faq-image .image-two img {
	border: 6px solid var(--white);
	height: 100%;
	object-fit: cover;
}

/*=============================
	17. Testimonial part start
===============================*/

/* testimonial area one */
.testimonial-area-one {
	padding-top: 120px;
}

.testimonial-area-slider-one .testimonial-item-one {
	margin: 0 15px;
}

.testimonial-item-one {
	padding: 40px;
	border-radius: 5px;
	background-color: var(--white);
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.07);
	position: relative;
}

.testimonial-item-one .quote-icon {
	position: absolute;
	right: 40px;
	top: 40px;
}

.testimonial-item-one .testimonial-avatar .image {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	overflow: hidden;
}

.testimonial-item-one .testimonial-avatar .image img {
	border-radius: 50%;
}

.testimonial-item-one .testimonial-avatar .text {
	margin-left: 20px;
}

.testimonial-item-one .testimonial-avatar .text h4 {
	font-size: 24px;
}

.testimonial-item-one .testimonial-avatar .text p {
	margin-top: 5px;
}

.testimonial-item-one .testimonial-info {
	margin-top: 40px;
}

.testimonial-item-one .testimonial-info .rating {
	margin-bottom: 20px;
}

.testimonial-item-one .testimonial-info .rating i {
	color: var(--primary);
	font-size: 14px;
}

.testimonial-area-slider-one .slick-dots {
	list-style: none;
	margin-top: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.testimonial-area-slider-one .slick-dots li {
	display: inline-block;
	margin: 0 8px;
}

.testimonial-area-slider-one .slick-dots li button {
	font-size: 0;
	list-style: none;
	width: 10px;
	height: 10px;
	border: 0;
	border-radius: 50%;
	background-color: var(--primary);
	position: relative;
}

.testimonial-area-slider-one .slick-dots li button::before {
	width: 24px;
	height: 24px;
	border: 2px solid var(--primary);
	border-radius: 50%;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: var(--transision);
}

.testimonial-area-slider-one .slick-dots .slick-active button::before {
	opacity: 1;
}

.testimonial-area-slider-one .slick-list {
	padding: 20px 0;
	margin: -20px 0;
}

/* testimonial area two */

.testimonial-area-two {
	padding-top: 120px;
}

.testimonial-slider-two {
	margin-top: 80px;
}

.testimonial-slider-two .slick-list {
	padding: 80px 0 20px 0;
	margin: -80px 0 -20px 0;
}

.testimonial-slider-item-two {
	background-color: var(--white);
	padding: 40px;
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.07);
	transition: var(--transision);
	margin: 0 15px;
}

.testimonial-slider-item-two:hover {
	background-color: var(--section-background);
	box-shadow: none;
}

.testimonial-slider-item-two .img {
	width: 150px;
	margin: 0 auto;
	margin-top: -120px;
	position: relative;
	z-index: 9;
}

.testimonial-slider-item-two .img::before {
	position: absolute;
	bottom: -8px;
	right: -8px;
	width: 150px;
	height: 150px;
	border: 1px solid var(--border-colour);
	content: "";
	z-index: -1;
	background-color: var(--white);
}

.testimonial-slider-item-two img {
	width: 100%;
	margin: 0 auto;
}

.testimonial-slider-item-two .text {
	padding-top: 30px;
}

.testimonial-slider-item-two .rating {
	margin-bottom: 20px;
}

.testimonial-slider-item-two .rating i {
	font-size: 14px;
	color: var(--primary);
}

.testimonial-slider-item-two .title {
	font-size: 24px;
}

.testimonial-slider-item-two .testimonial-info {
	margin-top: 40px;
}

.testimonial-slider-item-two .title {
	font-size: 24px;
}

.testimonial-slider-item-two .testimonial-info p {
	margin-top: 10px;
}

.testimonial-slider-two .icon {
	width: 60px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	border-radius: 50%;
	color: var(--primary);
	background-color: rgba(0, 48, 216, 0.1);
	cursor: pointer;
	transition: var(--transision);
	position: absolute;
	top: -120px;
	z-index: 9;
}

.testimonial-slider-two .icon.right {
	right: 17px;
}

.testimonial-slider-two .icon.left {
	left: calc(100% - 157px);
}

.testimonial-slider-two .icon:hover {
	background-color: var(--primary);
	color: var(--white);
}


/* About us testimonial area start */

.about-us-testimonial-area {
	padding-top: 120px;
}

.about-us-testimonial-area .testimonial-area-bg {
	background-color: var(--section-background);
	padding: 120px 0;
}

.about-us-testimonial-area .testimonial-area-bg .container {
	position: relative;
}

.about-us-testimonial-area .testimonial-area-bg .shape {
	position: absolute;
	top: 0;
}

.about-us-testimonial-area .testimonial-area-bg .shape-1 {
	left: 116px;
}

.about-us-testimonial-area .testimonial-area-bg .shape-2 {
	left: calc(100% - 214px);
}

.about-us-testimonial-area .slider-item .testimonial-image {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto;
	margin-bottom: 30px;
}

.about-us-testimonial-area .slider-item .testimonial-info {
	max-width: 690px;
	margin: 0 auto;
}

.about-us-testimonial-area .shape-colour {
	fill: var(--primary);
}

.about-us-testimonial-area .slider-item .testimonial-info .title {
	font-size: 24px;
	margin-bottom: 20px;
}

.about-us-testimonial-area .slider-item .testimonial-info .rating {
	margin-bottom: 30px;
}

.about-us-testimonial-area .slider-item .testimonial-info .rating i {
	font-size: 16px;
	color: var(--primary);
	margin: 0 5px;
}

.about-testimonial-slider .icon {
	width: 67px;
	height: 67px;
	background-color: var(--white);
	border-radius: 50%;
	text-align: center;
	line-height: 67px;
	font-size: 17px;
	color: var(--primary);
	border: 1px solid var(--primary);
	filter: drop-shadow(0px 6px 50px rgba(37, 37, 37, 0.05));
	cursor: pointer;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: var(--transision);
}

.about-testimonial-slider .icon:hover {
	background-color: var(--primary);
	color: var(--white);
}

.about-testimonial-slider .left {
	left: 0;
	z-index: 9;
}

.about-testimonial-slider .right {
	left: calc(100% - 67px);
}

/*=============================
	18. Messages part start
===============================*/

.messages-area-one {
	padding-top: 120px;
}

.messages-area-one .section-title-one {
	margin-bottom: 40px;
}

.messages-area-one .messages-area-one-main {
	background-color: var(--black);
}

.messages-area-one .messages-area-one-bg .section-title-one {
	max-width: 600px;
}

.messages-area-one .messages-area-one-bg .text {
	padding: 40px 40px 40px 0;
}

.messages-area-one .messages-area-one-bg .input-group {
	margin-bottom: 20px;
}

.messages-area-one .messages-area-one-bg .input-group input {
	width: 100%;
	height: 60px;
	background-color: transparent;
	border: 1px solid #333F4D;
	border-radius: 5px;
	color: var(--white);
	padding: 0 20px;
	transition: var(--transision);
}

.messages-area-one .messages-area-one-bg .input-group input:focus {
	border-color: #0030d8;
}

.messages-area-one .messages-area-one-bg .input-group input::placeholder {
	opacity: 1;
}

.messages-area-one .messages-area-one-bg .input-group input::-webkit-input-placeholder {
	opacity: 1;
	color: var(--white);
}

.messages-area-one .messages-area-one-bg .input-group select {
	width: 100%;
	height: 60px;
	background-color: transparent;
	border: 1px solid #333F4D;
	border-radius: 5px;
	color: var(--white);
	padding: 0 20px;
	padding-right: 40px;
	appearance: none;
	position: relative;
	background: url("../img/icons/down-arrow.png") 94% / 4% no-repeat;
	transition: var(--transision);
}

.messages-area-one .messages-area-one-bg .input-group select:focus {
	border-color: var(--primary);
}

.messages-area-one .messages-area-one-bg .input-group select option {
	color: var(--black);
}

.messages-area-one .messages-area-one-bg .input-group textarea {
	width: 100%;
	background-color: transparent;
	border: 1px solid #333F4D;
	border-radius: 5px;
	color: var(--white);
	padding: 15px 20px;
	resize: none;
	transition: var(--transision);
}

.messages-area-one .messages-area-one-bg .input-group textarea:focus {
	border-color: var(--primary);
}

.messages-area-one .messages-area-one-bg .input-group textarea::placeholder {
	opacity: 1;
}

.messages-area-one .messages-area-one-bg .input-group textarea::-webkit-input-placeholder {
	opacity: 1;
	color: var(--white);
}

.messages-area-one .messages-area-one-bg .submit-btn {
	width: 100%;
	background-color: var(--primary);
	height: 72px;
	line-height: 72px;
	border: 0;
	border-radius: 5px;
	color: var(--white);
	font-family: var(--link-font-family);
	font-weight: 700;
}

.messages-area-one .messages-area-one-bg .submit-btn:hover {
	background-color: var(--white);
	color: var(--black);
}

/*=============================
	19. News part start
===============================*/

/* news area one */
.news-area-one {
	padding-top: 120px;
}

.news-area-one .news-area-bg-one {
	padding: 120px 0;
	background-color: var(--section-background);
}

.news-area-one .news-area-bg-one .container {
	position: relative;
}

.news-area-one-slider .news-item-one {
	margin: 0 15px;
}

.news-item-one {
	border-radius: 5px;
	overflow: hidden;
	background-color: var(--white);
	box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.05);
}

.news-item-one .text {
	padding: 20px 40px 37px;
}

.news-item-one .text .news-meta {
	border-bottom: 1px solid var(--border-colour);
	padding-bottom: 10px;
}

.news-item-one .text .news-meta ul li {
	display: inline-block;
}

.news-item-one .text .news-meta ul li:first-child {
	margin-right: 30px;
}

.news-item-one .text .news-meta ul li i {
	color: var(--primary);
	margin-right: 10px;
}

.news-item-one .text .news-meta ul li a {
	color: var(--paragraph-color);
}

.news-item-one .text .news-meta ul li a:hover {
	color: var(--primary);
}

.news-item-one .text .news-title {
	margin-bottom: 30px;
	font-size: 24px;
	margin-top: 10px;
	transition: all 0.3s ease-out 0s;
}

.news-item-one .text .news-title:hover a {
	color: var(--primary);
}

.news-item-one .text .read-more {
	font-weight: 700;
	font-size: 18px;
	font-family: var(--link-font-family);
	color: var(--black);
}

.news-item-one .text .read-more:hover {
	color: var(--primary);
}

.news-item-one .text .read-more i {
	margin-left: 10px;
	font-size: 14px;
}

.news-area-one-slider .icon {
	width: 60px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	border-radius: 50%;
	color: var(--primary);
	background-color: rgba(0, 48, 216, 0.1);
	cursor: pointer;
	transition: var(--transision);
	position: absolute;
	top: -120px;
	z-index: 9;
}

.news-area-one-slider .icon.right {
	right: 17px;
}

.news-area-one-slider .icon.left {
	left: calc(100% - 157px);
}

.news-area-one-slider .icon:hover {
	background-color: var(--primary);
	color: var(--white);
}

/* news area two */

.news-area-two {
	padding-top: 120px;
	padding-bottom: 120px;
}

.news-area-two .section-title-one .sub-title {
	margin-left: 0;
}

.news-area-two-slider .news-item-two {
	margin: 0 15px;
}

.news-area-two-slider .slick-list {
	padding: 20px 0;
	margin: -20px 0;
}

.news-item-two {
	border-radius: 5px;
	overflow: hidden;
	background-color: var(--white);
	box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.05);
}

.news-item-two .image img {
	border-bottom-right-radius: 5px;
}

.news-item-two .image .date {
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: var(--primary);
	padding: 15px 20px;
}

.news-item-two .image .date p {
	color: var(--white);
}

.news-item-two .image .date p i {
	margin-right: 10px;
}

.news-item-two .text {
	padding: 20px 40px 37px;
}

.news-item-two .text .news-meta {
	padding-bottom: 20px;
}

.news-item-two .text .news-meta ul li {
	display: inline-block;
	color: var(--paragraph-color);
}

.news-item-two .text .news-meta ul li:first-child {
	margin-right: 30px;
}

.news-item-two .text .news-meta ul li i {
	margin-right: 10px;
}

.news-item-two .text .news-meta ul li a {
	color: var(--paragraph-color);
}

.news-item-two .text .news-meta ul li a:hover {
	color: var(--primary);
}

.news-item-two .text .news-title {
	margin-bottom: 20px;
	font-size: 24px;
	transition: all 0.3s ease-out 0s;
}

.news-item-two .text .news-title:hover a {
	color: var(--primary);
}

.news-item-two .text .read-more {
	font-weight: 700;
	font-size: 18px;
	font-family: var(--link-font-family);
	color: var(--black);
}

.news-item-two .text .read-more:hover {
	color: var(--primary);
}

.news-item-two .text .read-more i {
	color: var(--primary);
	margin-left: 10px;
}

.news-area-two-slider .slick-dots {
	list-style: none;
	margin-top: 80px;
	display: flex;
	justify-content: center;
}

.news-area-two-slider .slick-dots li {
	display: inline-block;
}

.news-area-two-slider .slick-dots li:first-child button {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.news-area-two-slider .slick-dots li:last-child button {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.news-area-two-slider .slick-dots li button {
	width: 100px;
	height: 10px;
	background-color: var(--section-background);
	border: 0;
	font-size: 0;
}

.news-area-two-slider .slick-dots .slick-active button {
	background-color: var(--primary);
	border-radius: 10px;
}

/* blog classic part */
.blog-classic-area {
	padding: 120px 0;
}

.blog-classic-item .blog-image {
	border-radius: 5px;
	overflow: hidden;
}

.blog-classic-item+.blog-classic-item {
	margin-top: 60px;
}

.blog-classic-item .blog-info {
	width: 90%;
	margin: 0 auto;
	padding: 40px;
	background-color: var(--section-background);
	border-radius: 5px;
}

.blog-classic-item .blog-info .title {
	font-size: 32px;
}

.blog-classic-item .blog-info .title:hover {
	color: var(--primary);
}

.blog-meta {
	margin: 10px 0 18px 0;
}

.blog-meta ul li {
	display: inline-block;
	margin-right: 25px;
	padding-right: 25px;
	position: relative;
}

.blog-meta ul li::before {
	position: absolute;
	top: 50%;
	left: -30px;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	background-color: var(--primary);
	border-radius: 50%;
	content: "";
}

.blog-meta ul li:first-child:before {
	display: none;
}

.blog-meta ul li a {
	color: var(--body-font-color);
}

.blog-meta ul li a:hover {
	color: var(--primary);
}

.blog-classic-item .blog-info .common-btn {
	margin-top: 22px;
}

.blog-classic-item .blog-info .share-icon {
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	border-radius: 50%;
	color: var(--primary);
	background-color: var(--white);
	margin-top: 22px;
}

.blog-classic-item .blog-info .share-icon:hover {
	background-color: var(--primary);
	color: var(--white);
}

.blog-right-sidebar .sidebar-search .input-group input {
	width: 100%;
	height: 70px;
	border: 1px solid var(--border-colour);
	padding: 0 20px;
	padding-right: 85px;
	border-radius: 5px !important;
	transition: var(--transision);
}

.blog-right-sidebar .sidebar-search .input-group input:focus {
	border-color: var(--primary);
}

.blog-right-sidebar .sidebar-search .input-group button {
	width: 50px;
	height: 50px;
	background-color: var(--primary);
	border-radius: 5px;
	text-align: center;
	line-height: 50px;
	border-radius: 5px !important;
	color: var(--white);
	font-size: 20px;
	border: 0;
	top: 50%;
	transform: translateY(-50%);
	right: 20px;
}

.blog-right-sidebar .sidebar-search {
	margin-bottom: 50px;
}

.blog-right-sidebar .sidebar-search .input-group button:hover {
	background-color: var(--black);
}

.blog-right-sidebar .blog-widget {
	border: 1px solid var(--border-colour);
	border-radius: 5px;
	margin-bottom: 50px;
}

.blog-right-sidebar .blog-widget:last-child {
	margin-bottom: 0;
}

.blog-right-sidebar .blog-widget .title-block {
	font-size: 24px;
	padding: 30px;
	border-bottom: 1px solid var(--border-colour);
}

.blog-right-sidebar .blog-widget .title {
	font-size: 24px;
	position: relative;
	display: inline-block;
}

.blog-right-sidebar .blog-widget .title::before {
	position: absolute;
	top: 50%;
	right: -60px;
	transform: translateY(-50%);
	width: 40px;
	height: 3px;
	background-color: var(--primary);
	content: "";
}

.blog-right-sidebar .blog-widget .list-body {
	padding: 0 30px;
	margin-top: 20px;
	margin-bottom: 30px;
}

.blog-right-sidebar .blog-widget .list-body li {
	border-bottom: 1px solid var(--border-colour);
	margin-bottom: 10px;
	padding-bottom: 10px;
}

.blog-right-sidebar .blog-widget .list-body li:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.blog-right-sidebar .blog-widget .list-body a {
	display: flex;
	justify-content: space-between;
	color: var(--body-font-color);
}

.blog-right-sidebar .blog-widget .list-body a:hover {
	color: var(--primary);
}

.blog-right-sidebar .blog-widget .popular-post-main {
	padding: 22px 30px 30px 30px;
}

.blog-right-sidebar .blog-widget .popular-post-item {
	border-bottom: 1px solid var(--border-colour);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.blog-right-sidebar .blog-widget .popular-post-item:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.blog-right-sidebar .blog-widget .popular-post-item .image {
	width: 80px;
	margin-right: 15px;
	flex: 0 0 auto;
}

.blog-right-sidebar .blog-widget .popular-post-item .text p i {
	color: var(--primary);
	font-size: 14px;
	margin-right: 9px;
}

.blog-right-sidebar .blog-widget .popular-post-item .text .blog-title:hover {
	color: var(--primary);
}

.blog-right-sidebar .blog-widget .project-main {
	padding: 22px 30px 30px 30px;
}

.blog-right-sidebar .blog-widget .tags {
	padding: 22px 30px 30px 30px;
}

.blog-right-sidebar .blog-widget .tags ul {
	display: flex;
	flex-wrap: wrap;
	gap: 19px;
}

.blog-right-sidebar .blog-widget .tags ul li a {
	border-radius: 5px;
	padding: 5px 10px;
	color: var(--body-font-color);
	background-color: var(--section-background);
}

.blog-right-sidebar .blog-widget .tags ul li a:hover {
	background-color: var(--black);
	color: var(--white);
}

/* blog details part */

.blog-details-area {
	padding: 120px 0;
}

.blog-details-area .blog-details-information .blog-details-image {
	border-radius: 5px;
	overflow: hidden;
}

.blog-details-area .blog-details-information .blog-meta {
	margin-top: 20px;
}

.blog-details-area .blog-details-information .blog-details-title {
	font-size: 32px;
	margin-bottom: 20px;
}

.blog-details-area .blog-details-information blockquote {
	padding: 60px;
	background-color: var(--section-background);
	margin: 30px 0 60px 0;
	border-radius: 5px;
	text-align: center;
	position: relative;
}

.blog-details-area .blog-details-information blockquote .short-description {
	color: var(--body-font-color);
	margin-bottom: 36px;
}

.blog-details-area .blog-details-information blockquote .title {
	font-size: 24px;
	margin-bottom: 5px;
}

.blog-details-area .blog-details-information blockquote .sub-title {
	color: var(--black);
}

.blog-details-area .blog-details-information blockquote .quote-icon {
	position: absolute;
	bottom: 60px;
	right: 60px;
}

.blog-details-area .blog-details-information blockquote .quote-icon i {
	color: rgba(246, 139, 33, 0.2);
	font-size: 64px;
}

.blog-details-area .blog-details-inner-content {
	margin-top: 60px;
}

.blog-details-area .blog-details-inner-content .title {
	font-size: 32px;
	margin-bottom: 20px;
}

.blog-details-area .blog-details-information .inner-content-image {
	margin: 30px 0;
}

.blog-details-area .blog-details-information .inner-content-image .image {
	border-radius: 5px;
	overflow: hidden;
}

.blog-details-area .blog-details-inner-content .list-info li {
	margin-bottom: 12px;
	color: var(--body-font-color);
	display: flex;
}

.blog-details-area .blog-details-inner-content .list-info li i {
	position: relative;
	top: 6px;
}

.blog-details-area .blog-details-inner-content .list-info li i {
	margin-right: 10px;
	color: var(--primary);
}

.blog-details-area .blog-details-inner-content .post-tags {
	margin-top: 60px;
}

.blog-details-area .blog-details-inner-content .post-tags .tags-title {
	font-size: 24px;
	margin-right: 10px;
}

.blog-details-area .blog-details-inner-content .post-tags li {
	display: inline-block;
	margin-right: 10px;
}

.blog-details-area .blog-details-inner-content .post-tags li a {
	background-color: var(--section-background);
	padding: 5px 10px;
	border-radius: 5px;
	color: var(--body-font-color);
}

.blog-details-area .blog-details-inner-content .post-tags li a:hover {
	background-color: var(--primary);
	color: var(--white);
}

.blog-details-area .blog-details-messages {
	margin-top: 120px;
}

.blog-details-area .blog-details-messages .title {
	font-size: 48px;
	margin-bottom: 20px;
}

.blog-details-area .blog-details-messages .messages-box {
	margin-top: 40px;
}

.blog-details-area .blog-details-messages .input-group {
	margin-bottom: 20px;
}

.blog-details-area .blog-details-messages .input-group input {
	width: 100%;
	height: 60px;
	background-color: transparent;
	border: 1px solid var(--border-colour);
	border-radius: 5px;
	color: var(--body-font-color);
	padding: 0 20px;
	transition: var(--transision);
}

.blog-details-area .blog-details-messages .input-group input:focus {
	border-color: #0030d8;
}

.blog-details-area .blog-details-messages .input-group input::placeholder {
	opacity: 1;
}

.blog-details-area .blog-details-messages .input-group input::-webkit-input-placeholder {
	opacity: 1;
	color: var(--body-font-color);
}

.blog-details-area .blog-details-messages .input-group select {
	width: 100%;
	height: 60px;
	background-color: transparent;
	border: 1px solid var(--border-colour);
	border-radius: 5px;
	color: var(--body-font-color);
	padding: 0 20px;
	padding-right: 60px;
	appearance: none;
	position: relative;
	background: url("../img/icons/down-arrow-black.png") 94% / 3% no-repeat;
	transition: var(--transision);
}

.blog-details-area .blog-details-messages .input-group select:focus {
	border-color: var(--primary);
}


.blog-details-area .blog-details-messages .input-group textarea {
	width: 100%;
	background-color: transparent;
	border: 1px solid var(--border-colour);
	border-radius: 5px;
	color: var(--body-font-color);
	padding: 15px 20px;
	resize: none;
	transition: var(--transision);
}

.blog-details-area .blog-details-messages .input-group textarea:focus {
	border-color: var(--primary);
}

.blog-details-area .blog-details-messages .input-group textarea::placeholder {
	opacity: 1;
}

.blog-details-area .blog-details-messages .input-group textarea::-webkit-input-placeholder {
	opacity: 1;
	color: var(--body-font-color);
}

.blog-details-area .blog-details-messages .submit-btn {
	width: 100%;
	background-color: var(--primary);
	height: 60px;
	line-height: 60px;
	border: 0;
	border-radius: 5px;
	color: var(--white);
	font-family: var(--link-font-family);
	font-weight: 700;
}

.blog-details-area .blog-details-messages .submit-btn:hover {
	background-color: var(--black);
	color: var(--white);
}


/*=============================
	20. Footer part
===============================*/

/* footer area one */
.footer-area-one .footer-area-one-bg {
	padding: 80px 0 0px 0;
	background-color: var(--black);
}

.footer-area-one .footer-widget .footer-content {
	margin-top: 30px;
}

.footer-area-one .footer-widget .footer-content p {
	color: var(--footer-font-colour);
}

.footer-area-one .footer-widget .footer-content .social {
	margin-top: 40px;
}

.footer-area-one .footer-widget .footer-content .social li {
	display: inline-block;
	margin-right: 10px;
}

.footer-area-one .footer-widget .footer-content .social a {
	width: 30px;
	height: 30px;
	color: var(--primary);
	text-align: center;
	line-height: 30px;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.1);
}

.footer-area-one .footer-widget .footer-content .social a:hover {
	background-color: var(--primary);
	color: var(--white);
}

.footer-area-one .footer-widget .footer-title {
	margin-bottom: 40px;
	font-size: 24px;
	color: var(--footer-font-colour);
	margin-top: 20px;
}

.footer-area-one .footer-widget p {
	color: var(--footer-font-colour);
}

.footer-area-one .footer-widget .footer-link ul li {
	margin-bottom: 10px;
}

.footer-area-one .footer-widget .footer-link a {
	color: var(--footer-font-colour);
}

.footer-area-one .footer-widget .footer-link a i {
	font-size: 14px;
	margin-right: 10px;
}

.footer-area-one .footer-widget .footer-link a:hover {
	color: var(--primary)
}

.footer-area-one .footer-widget .footer-address ul li {
	margin-bottom: 20px;
}

.footer-area-one .footer-widget .footer-address ul li .icon {
	margin-right: 20px;
}

.footer-area-one .footer-widget .footer-address ul li .icon i {
	width: 40px;
	height: 40px;
	color: var(--primary);
	font-size: 20px;
	text-align: center;
	line-height: 40px;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.1);
}

.footer-area-one .footer-widget .footer-address ul li .content a {
	color: var(--footer-font-colour);
	display: block;
}

.footer-area-one .footer-widget .footer-address ul li .content a:hover {
	color: var(--primary);
}

.footer-area-one .footer-widget .footer-newsletter {
	margin-top: 30px;
}

.footer-area-one .footer-widget .footer-newsletter input {
	width: 100%;
	height: 57px;
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 5px;
	padding: 0 110px 0 15px;
	border: 0;
	color: rgba(255, 255, 255, 0.6);
	border: 1px solid transparent;
	transition: var(--transision);
}

.footer-area-one .footer-widget .footer-newsletter input:focus {
	border-color: rgba(0, 48, 216, 0.5);
}

.footer-area-one .footer-widget .footer-newsletter button {
	width: 75px;
	height: 47px;
	border-radius: 5px;
	background-color: var(--primary);
	color: var(--white);
	border: 0;
	font-size: 20px;
	top: 50%;
	right: 5px;
	transform: translateY(-50%);
	transition: var(--transision);
}

.footer-area-one .footer-widget .footer-newsletter button:hover {
	background-color: var(--white);
	color: var(--primary);
}

.footer-bottom {
	border-top: 1px solid #333F4D;
	margin-top: 60px;
	padding: 30px 0;
}

.footer-bottom p {
	color: var(--footer-font-colour);
}

.footer-bottom .links ul li {
	display: inline-block;
}

.footer-bottom .links ul li {
	margin-left: 30px;
}

.footer-bottom .links ul li:first-child {
	margin-left: 0px;
}

.footer-bottom .links ul li a {
	color: var(--footer-font-colour);
}

.footer-bottom .links ul li a:hover {
	color: var(--primary);
}

/* footer area two */

.footer-area-two .footer-area-two-bg {
	padding: 80px 0 0px 0;
	background-color: var(--black);
}

.footer-area-two .footer-widget .footer-content {
	margin-top: 20px;
}

.footer-area-two .footer-widget .footer-content p {
	color: var(--white);
}

.footer-area-two .footer-widget .footer-content .social {
	margin-top: 30px;
}

.footer-area-two .footer-widget .footer-content .social li {
	display: inline-block;
	margin-right: 15px;
}

.footer-area-two .footer-widget .footer-content .social a {
	color: rgba(255, 255, 255, 0.8);
}

.footer-area-two .footer-widget .footer-content .social a:hover {
	color: var(--primary);
}

.footer-area-two .footer-widget .footer-title {
	margin-bottom: 30px;
	font-size: 24px;
	color: var(--white);
	margin-top: 20px;
}

.footer-area-two .footer-widget p {
	color: var(--white);
}

.footer-area-two .footer-widget .footer-link ul li {
	margin-bottom: 10px;
}

.footer-area-two .footer-widget .footer-link a {
	color: var(--white);
}

.footer-area-two .footer-widget .footer-link a i {
	font-size: 14px;
	margin-right: 10px;
}

.footer-area-two .footer-widget .footer-link a:hover {
	color: var(--primary)
}

.footer-area-two .footer-widget .footer-newsletter {
	margin-top: 30px;
}

.footer-area-two .footer-widget .footer-gallery ul {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.footer-area-two .footer-widget .footer-gallery ul li {
	width: 30%;
}

.footer-area-two .footer-widget .footer-gallery ul li img {
	width: 100%;
}

.footer-area-two .footer-bottom p {
	color: var(--white);
}

.footer-area-two .footer-bottom .links ul li a {
	color: var(--white);
}

.footer-area-two .footer-bottom .links ul li a:hover {
	color: var(--primary);
}

/* scroll top part start */

.scroll-to-top {
	display: inline-block;
	background-color: var(--primary);
	width: 40px;
	height: 40px;
	line-height: 40px;
	color: var(--white);
	text-align: center;
	border-radius: 5px;
	border: 0;
	position: fixed;
	bottom: -60px;
	right: 30px;
	transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
	opacity: 0;
	visibility: hidden;
	font-size: 18px;
	z-index: 99;
	cursor: pointer;
	transition: var(--transision);
}

.scroll-to-top::after {
	position: absolute;
	z-index: -1;
	content: '';
	top: 100%;
	left: 5%;
	height: 10px;
	width: 90%;
	opacity: 1;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
}

.scroll-to-top.show {
	opacity: 1;
	visibility: visible;
	bottom: 30px;
}

/*=============================
	21. Breadcrumb area start
===============================*/

.breadcrumb-area {
	background-color: var(--black);
	background-repeat: no-repeat;
	background-position-x: center;
	background-position-y: 70px;
	padding: 195px 0;
	overflow: hidden;
	position: relative;
}

.breadcrumb-area::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(23, 23, 23, 0.95);
	content: "";
}

.breadcrumb-area .breadcrumb-content {
	position: relative;
	z-index: 9;
}

.breadcrumb-area .breadcrumb-content .title {
	font-size: 42px;
}

.breadcrumb-area .breadcrumb-content .bread-crumb li {
	font-size: 24px;
	font-weight: 700;
	color: var(--white);
	font-family: var(--link-font-family);
	display: inline-block;
	position: relative;
	margin-left: 19px;
	padding-left: 19px
}

.breadcrumb-area .breadcrumb-content .bread-crumb li::before {
	position: absolute;
	top: 0;
	right: -27px;
	content: "\f054";
	font-family: "Font Awesome 5 Free";
	color: var(--primary);
	font-size: 16px;
}

.breadcrumb-area .breadcrumb-content .bread-crumb li a {
	color: var(--white);
}

.breadcrumb-area .breadcrumb-content .bread-crumb li a:hover {
	color: var(--primary);
}

.breadcrumb-area .breadcrumb-content .bread-crumb li:last-child::before {
	display: none;
}

/*=============================
	22. contact form area start
===============================*/

.contact-form-area {
	padding-top: 120px;
}

.contact-form-area .section-title-one {
	margin-bottom: 20px;
}

.contact-form-area .short-description {
	margin-bottom: 30px;
}

.contact-form-area .contact-form .input-group {
	margin-bottom: 20px;
}

.contact-form-area .contact-form .input-group input {
	width: 100%;
	border-radius: 5px;
	height: 60px;
	border: 1px solid var(--border-colour);
	padding: 0 30px;
	transition: var(--transision);
}

.contact-form-area .contact-form .input-group input:focus {
	border-color: var(--black);
}

.contact-form-area .contact-form .input-group textarea {
	width: 100%;
	border-radius: 5px;
	height: 175px;
	border: 1px solid var(--border-colour);
	padding: 30px;
	resize: none;
	transition: var(--transision);
}

.contact-form-area .contact-form .input-group textarea:focus {
	border-color: var(--black);
}

.contact-form-area .contact-form .submit-btn {
	margin-top: 20px;
	background-color: var(--primary);
	border-radius: 5px;
	transition: var(--transision);
	color: var(--white);
	font-family: var(--link-font-family);
	font-weight: 700;
	border: 0;
	padding: 13px 40px;
}

.contact-form-area .contact-form .submit-btn:hover {
	background-color: var(--black);
}

.contact-form-area .contact-information {
	padding-left: 60px;
}

.contact-form-area .contact-information .contact-info-item+.contact-info-item {
	margin-top: 60px;
}

.contact-form-area .contact-information .contact-info-item ul {
	display: flex;
}

.contact-form-area .contact-information .contact-info-item ul .icon {
	margin-right: 20px;
}

.contact-form-area .contact-information .contact-info-item ul .icon i {
	font-size: 25px;
	color: var(--primary);
	margin-top: 3px;
}

.contact-form-area .contact-information .contact-info-item ul .title {
	font-size: 24px;
}

.contact-form-area .contact-information .contact-info-item p {
	margin-top: 5px;
}

/*=============================
	23. Contact map area start
===============================*/

.contact-map-area {
	padding-top: 120px;
}

.contact-map-area .contact-map {
	height: 696px;
}

.contact-map-area .contact-map iframe {
	height: 100%;
	width: 100%;
	mix-blend-mode: luminosity;
}

/*=============================
	24. Call to action area start
===============================*/

.call-to-action-area {
	background-color: var(--primary);
	position: relative;
}

.call-to-action-area .image {
	height: 100%;
	clip-path: polygon(0 0, 100% 0, calc(100% - 8%) 100%, 0% 100%);
}

.call-to-action-area .image img {
	height: 100%;
	object-fit: cover;
}

.call-to-action-area .info {
	padding: 86px 0;
	padding-left: 24px;
	max-width: 628px;
	position: relative;
}

.call-to-action-area .info .title {
	font-size: 32px;
}

.call-to-action-area .info p {
	margin-top: 5px;
}

.call-to-action-area .info .phone-icon {
	width: 70px;
	height: 70px;
	text-align: center;
	line-height: 70px;
	border-radius: 50%;
	color: var(--primary);
	font-size: 30px;
	background-color: var(--white);
	transition: var(--transision);
	position: absolute;
	top: 50%;
	left: -100px;
	transform: translateY(-50%);
}

/* Preloader */
#preloader {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--white);
	z-index: 999;
	width: 100%;
	height: 100%;
}
.spinner {
  margin: 100px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}
.spinner > div {
  background-color: var(--primary);
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4);
  }

  20% {
    -webkit-transform: scaleY(1.0);
  };
}
@keyframes sk-stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }

  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  };
}
/* EBS branding tweaks */
img[alt="logo"], img[alt="white-logo"], img[alt="white logo"]{max-height:44px;width:auto}

/* =====================================================================
   EBS — BRIGHT THEME OVERRIDES  (added last; colours only, no layout)
   Turns the template's dark bands white/bright, keeps EBS blue accents.
   ===================================================================== */
:root{ --ebs-band:#eef2f8; --ebs-ink:#0a0a0a; --ebs-body:#3a4453; --ebs-line:#dbe2ee; }

/* 1) Breadcrumb banner (all inner pages): black -> bright */
.breadcrumb-area{
  background-color:#eef2f8 !important;
  background-image:none !important;
  padding:130px 0 105px !important;
  border-bottom:1px solid #dbe2ee;
}
.breadcrumb-area::before{ background-color:transparent !important; }
.breadcrumb-area .breadcrumb-content .title{ color:#0a0a0a; }
.breadcrumb-area .breadcrumb-content .bread-crumb li,
.breadcrumb-area .breadcrumb-content .bread-crumb li a{ color:#3a4453; }
.breadcrumb-area .breadcrumb-content .bread-crumb li a:hover{ color:var(--primary); }

/* 2) Home "get updates" band: keep blue diagonal, lighten the black half */
.get-updates-area-one .update-area-bg-one{ background-color:#eef2f8 !important; }
.get-updates-area-one .update-area-bg-one .contact-info .text .title,
.get-updates-area-one .update-area-bg-one .contact-info .text .number{ color:#0a0a0a; }

/* 3) Home quote-form band: black -> bright */
.messages-area-one .messages-area-one-main{ background-color:#eef2f8 !important; background-image:none !important; }
.messages-area-one .messages-area-one-main .section-title-one .title{ color:#0a0a0a; }
.messages-area-one .messages-area-one-main p{ color:#3a4453; }
.messages-area-one .messages-area-one-bg .input-group input,
.messages-area-one .messages-area-one-bg .input-group select,
.messages-area-one .messages-area-one-bg .input-group textarea{
  background-color:#ffffff !important; border-color:#dbe2ee !important; color:#0a0a0a !important;
}
.messages-area-one .messages-area-one-bg .input-group input::placeholder,
.messages-area-one .messages-area-one-bg .input-group textarea::placeholder,
.messages-area-one .messages-area-one-bg .input-group input::-webkit-input-placeholder,
.messages-area-one .messages-area-one-bg .input-group textarea::-webkit-input-placeholder{ color:#7a8699 !important; }

/* 4) Footer: black -> bright */
.footer-area-one .footer-area-one-bg{ background-color:#eef2f8 !important; }
.footer-area-one .footer-widget .footer-content p,
.footer-area-one .footer-widget p,
.footer-area-one .footer-widget .footer-link a,
.footer-area-one .footer-widget .footer-address ul li .content a,
.footer-bottom p,
.footer-bottom .links ul li a{ color:#3a4453 !important; }
.footer-area-one .footer-widget .footer-title{ color:#0a0a0a !important; }
.footer-area-one .footer-widget .footer-content .social a,
.footer-area-one .footer-widget .footer-address ul li .icon i{
  background-color:rgba(0,48,216,0.08) !important; color:var(--primary) !important;
}
.footer-area-one .footer-widget .footer-newsletter input{
  background-color:#ffffff !important; border:1px solid #dbe2ee !important; color:#0a0a0a !important;
}
.footer-area-one .footer-widget .footer-newsletter input::placeholder,
.footer-area-one .footer-widget .footer-newsletter input::-webkit-input-placeholder{ color:#7a8699 !important; }
.footer-bottom{ border-top:1px solid #dbe2ee !important; }
.footer-area-one .footer-widget .footer-link a:hover,
.footer-area-one .footer-widget .footer-address ul li .content a:hover,
.footer-bottom .links ul li a:hover{ color:var(--primary) !important; }

/* ---- EBS bright theme v2: beat utility colour classes on light regions ---- */

/* Breadcrumb title + crumbs (inner pages) */
.breadcrumb-area .breadcrumb-content .title,
.breadcrumb-area .breadcrumb-content .title.text-white,
.breadcrumb-area .text-white{ color:#0a0a0a !important; }
.breadcrumb-area .breadcrumb-content .bread-crumb li,
.breadcrumb-area .breadcrumb-content .bread-crumb li a{ color:#3a4453 !important; }
.breadcrumb-area .breadcrumb-content .bread-crumb li a:hover{ color:var(--primary) !important; }

/* Get-updates: RIGHT (contact-info) is light -> dark. LEFT blue diagonal keeps white. */
.get-updates-area-one .update-area-bg-one .contact-info,
.get-updates-area-one .update-area-bg-one .contact-info *,
.get-updates-area-one .update-area-bg-one .contact-info .text-white,
.get-updates-area-one .update-area-bg-one .contact-info a{ color:#0a0a0a !important; }
.get-updates-area-one .update-area-bg-one .contact-info .icon i{ color:#ffffff !important; } /* icon on its blue circle */

/* Quote-form band (fully light): dark text, blue eyebrow */
.messages-area-one .messages-area-one-main .text-white,
.messages-area-one .messages-area-one-main .title{ color:#0a0a0a !important; }
.messages-area-one .messages-area-one-main .sub-title,
.messages-area-one .messages-area-one-main .white{ color:var(--primary) !important; }

/* Footer: force all text dark regardless of utility class; keep social + button accents */
.footer-area-one .footer-area-one-bg a,
.footer-area-one .footer-area-one-bg p,
.footer-area-one .footer-area-one-bg li,
.footer-area-one .footer-area-one-bg .footer-link a,
.footer-area-one .footer-area-one-bg .text-white,
.footer-bottom a, .footer-bottom p{ color:#3a4453 !important; }
.footer-area-one .footer-area-one-bg .footer-title{ color:#0a0a0a !important; }
.footer-area-one .footer-widget .footer-content .social a{ color:var(--primary) !important; }
.footer-area-one .footer-widget .footer-address ul li .icon i{ color:var(--primary) !important; }

/* ---- EBS bright theme v3: home projects band + index-2 (alt home) ---- */

/* Home "recent work": black strip -> light, heading -> ink */
.recent-work-area-one .recent-work-one-bg::before{ background-color:#eef2f8 !important; }
.recent-work-area-one .section-title-one .title,
.recent-work-area-one .section-title-one .title.text-white{ color:#0a0a0a !important; }
/* slider arrows were white-on-black; make them blue on the light band */
.recent-work-slider-one .icon{ color:#0030d8 !important; background-color:rgba(0,48,216,0.10) !important; }
.recent-work-slider-one .icon:hover{ color:#ffffff !important; background-color:#0030d8 !important; }
/* project-card caption bar: dark tint -> clean white card, dark text */
.recent-work-area-one .project-item-one .info{ background-color:rgba(255,255,255,0.94) !important; }
.recent-work-area-one .project-item-one .info .text .title{ color:#0a0a0a !important; }
.recent-work-area-one .project-item-one .info .text p{ color:#3a4453 !important; }

/* index-2 hero: soften the heavy dark tint so the photo reads bright */
.banner-area-two .overlay{ background-color:rgba(23,23,23,0.35) !important; }

/* index-2 "get updates" band: black -> light, text -> ink */
.get-updates-area-two .get-updates-area-bg{ background-color:#eef2f8 !important; }
.get-updates-area-two .get-updates-area-bg .section-title-one .title,
.get-updates-area-two .get-updates-area-bg .title,
.get-updates-area-two .get-updates-area-bg .text-white{ color:#0a0a0a !important; }
.get-updates-area-two .get-updates-area-bg p{ color:#3a4453 !important; }
.get-updates-area-two .get-updates-area-bg input{
  background-color:#ffffff !important; border:1px solid #dbe2ee !important; color:#0a0a0a !important;
}

/* index-2 footer: black -> light (mirror of footer-area-one) */
.footer-area-two .footer-area-two-bg{ background-color:#eef2f8 !important; }
.footer-area-two .footer-area-two-bg a,
.footer-area-two .footer-area-two-bg p,
.footer-area-two .footer-area-two-bg li,
.footer-area-two .footer-area-two-bg .text-white{ color:#3a4453 !important; }
.footer-area-two .footer-area-two-bg .footer-title{ color:#0a0a0a !important; }
.footer-area-two .footer-area-two-bg a:hover{ color:#0030d8 !important; }
.footer-area-two .footer-area-two-bg .social a{
  color:#0030d8 !important; background-color:rgba(0,48,216,0.08) !important;
}

/* ---- EBS logo sizing: cap by wrapper class (alt text varies) ---- */
.header-logo img, .header-area .logo img, .header-area-two .logo img,
.mobile-topbar .logo img, .mobile-menu-main .logo img,
.offcanvas-menu-info .logo img{ max-height:44px !important; width:auto !important; }
.footer-logo img{ max-height:56px !important; width:auto !important; }

/* ---- EBS horizontal logo sizing ---- */
.header-logo img, .header-area .logo img, .header-area-two .logo img{ max-height:48px !important; }
.footer-logo img{ max-height:48px !important; }
.mobile-topbar .logo img, .mobile-menu-main .logo img, .offcanvas-menu-info .logo img{ max-height:40px !important; }

/* ---- get-updates band: solid EBS blue CTA (white text never hits light bg) ---- */
.get-updates-area-one .update-area-bg-one{ background-color:#0030d8 !important; }
.get-updates-area-one .update-area-bg-one::before{ background-color:#0030d8 !important; }
.get-updates-area-one .update-area-bg-one .get-updates-info .title,
.get-updates-area-one .update-area-bg-one .get-updates-info p{ color:#ffffff !important; }
.get-updates-area-one .update-area-bg-one .contact-info,
.get-updates-area-one .update-area-bg-one .contact-info *,
.get-updates-area-one .update-area-bg-one .contact-info .text .title,
.get-updates-area-one .update-area-bg-one .contact-info .text .number,
.get-updates-area-one .update-area-bg-one .contact-info a{ color:#ffffff !important; }
.get-updates-area-one .update-area-bg-one .contact-info .icon i{
  background-color:#ffffff !important; color:#0030d8 !important;
}

/* ---- full horizontal logo (with tagline): slightly taller cap ---- */
.header-logo img, .header-area .logo img, .header-area-two .logo img, .navbar-brand img{ max-height:54px !important; width:auto !important; }
.footer-logo img{ max-height:54px !important; }

/* ---- hero video: sits exactly where the banner img sat ---- */
.banner-area-one .banner-image video.banner-video{
  position:absolute; top:50%; transform:translateY(-50%); left:40px;
  width:calc(100% - 40px); height:auto; object-fit:cover; border-radius:6px; background:#eef2f8;
}

/* hero video responsive: mirror the template's banner img behaviour */
@media (max-width: 1199.98px){
  .banner-area-one .banner-image video.banner-video{ left:0; }
}
@media (max-width: 991.98px){
  .banner-area-one .banner-image video.banner-video{
    position:static; transform:none; left:auto; width:100%; height:auto;
  }
}

/* hero video: fill the old image's near-square footprint, crop to fit */
.banner-area-one .banner-image video.banner-video{
  aspect-ratio: 1822 / 1666;
  height: auto;
  object-fit: cover;
  object-position: 38% center;
}

/* EBS: quote-form left image fills the full column height (kills the empty blue gap below it) */
.messages-area-one .messages-area-one-main .row { align-items: stretch; }
.messages-area-one .messages-area-one-main .row > div:first-child { display: flex; }
.messages-area-one .messages-area-one-main .image { width: 100%; padding-right: 0 !important; overflow: hidden; }
.messages-area-one .messages-area-one-main .image img { height: 100%; width: 100%; object-fit: cover; object-position: 50% 35%; }
@media (max-width: 991px){
  .messages-area-one .messages-area-one-main .row > div:first-child { display: block; }
  .messages-area-one .messages-area-one-main .image { display: block !important; height: 260px; }
  .messages-area-one .messages-area-one-main .image img { display: block; height: 260px; width: 100%; object-fit: cover; }
}

/* EBS: consistent card image sizes across the home grids (were uneven heights) */
.recent-work-area-one .project-item-one .image img { height: 236px; width: 100%; object-fit: cover; display: block; }
.news-area-one .news-item-one .image img { height: 230px; width: 100%; object-fit: cover; display: block; }
.active-employes-area-one .active-employes-item-one .image img { height: 260px; width: 100%; object-fit: cover; display: block; }

/* project cards: uniform image + clean caption BELOW it (full building visible, tidy row) */
.recent-work-area-one .project-item-one { position: relative; }
.recent-work-area-one .project-item-one .image { border-radius: 14px; overflow: hidden; display: block; }
.recent-work-area-one .project-item-one .info { position: static !important; transform: none !important; background: none !important; padding: 15px 2px 0; min-height: 96px; align-items: flex-start !important; }
.recent-work-area-one .project-item-one .info .text .title { min-height: 44px; }
.recent-work-area-one .project-item-one .info .text .title a { color: #0a0a0a; }
.recent-work-area-one .project-item-one .info .text p { color: #5b6675; margin: 0; }
.recent-work-area-one .project-item-one .plus a { display: inline-flex; align-items: center; justify-content: center; }

/* footer logo: cap width so the wide horizontal lockup fits its column (was overflowing into Our Products) */
.footer-area-one .footer-logo img { max-width: 188px !important; max-height: 44px !important; width: auto !important; height: auto !important; }
.footer-area-one .footer-widget.ms-5 { margin-left: 0 !important; }

/* EBS: breadcrumb = distinct photo header per page (bright photo + readable scrim + white title) */
.breadcrumb-area{ background-size:cover !important; background-position:center !important; background-color:#0a1220 !important; padding:150px 0 !important; border-bottom:none !important; }
.breadcrumb-area::before{ background:linear-gradient(rgba(8,14,28,.28), rgba(8,14,28,.55)) !important; }
.breadcrumb-area .breadcrumb-content .title,
.breadcrumb-area .breadcrumb-content .title.text-white,
.breadcrumb-area .text-white{ color:#fff !important; }
.breadcrumb-area .breadcrumb-content .bread-crumb li,
.breadcrumb-area .breadcrumb-content .bread-crumb li a{ color:rgba(255,255,255,.9) !important; }

/* EBS FIX — the template's responsive.css has NO rules above 1799px, so on wide screens the
   large-desktop rules vanished: the about image reverted to its natural 1400px width and blew
   out across the text column. Carry the 1400–1799 large-desktop rules forward to any width. */
@media (min-width:1800px){
  .header-area-one .header-right-info .help-number{ margin-left:34px; }
  .header-area-one .header-right-info .social ul li a{ margin-left:20px; }
  .header-area-one .navbar-nav{ margin-left:50px; }
  .header-area-one .navbar-nav .nav-link{ margin-right:22px; }
  .banner-area-one .banner-image{ width:100%; }
  .banner-area-one .banner-image img{ left:0; }
  .about-us-area-one .image img{ margin-left:0; width:100%; }
  .about-us-area-one .about-info{ margin-top:0; }
}
/* belt-and-braces: no content image may ever exceed its column at any width */
.about-us-area-one .image img{ max-width:100%; }

/* EBS FIX — systemic: several template images have NO width constraint at some breakpoints
   (container capped but <img> renders at natural size) causing horizontal page overflow.
   Global safety net + the specific FAQ image that overflowed. */
img{ max-width:100%; }
.faq-area-one .faq-image .image-one img{ width:100%; height:auto; }

/* EBS FIX — the CTA band's .row sits directly inside the section (no .container), so its
   -15px Bootstrap gutters overflowed the page by 15px on every inner page (h-scrollbar). */
.call-to-action-area{ overflow-x:hidden; }

/* EBS FIX — hidden nav dropdowns still occupy layout; the rightmost ones extended past the
   viewport and created a horizontal scrollbar (~992-1100px). Right-align them so they stay
   on-screen (keeps the fade transition, unlike display:none). */
.header-area-one .navbar-nav > .nav-item:nth-last-child(2) > .sub-menu,
.header-area-one .navbar-nav > .nav-item:nth-last-child(3) > .sub-menu{ left:auto; right:0; }
/* decorative hero shape bled past the viewport at narrow desktop widths */
.banner-area-one{ overflow-x:hidden; }

/* EBS FIX — a decorative pseudo-element in the about section overhung the viewport by ~7px on
   small phones. Content all fits, so clipping the stray overhang is safe. */
.about-us-area-one{ overflow-x:hidden; }

/* EBS FIX — service card icon badge: the template made it a BLACK square that flipped to
   blue on hover, and the icon art is blue (#0030d8), so on hover the icon vanished
   (blue-on-blue = blank square). Badge is now WHITE at rest AND on hover, so the blue icon
   is always visible. Border + shadow keep the white badge legible over the photo. */
.all-services-item .image .icon,
.all-services-item:hover .image .icon{
  background-color:#fff !important;
  border:1px solid #e4e9f2;
  box-shadow:0 6px 18px rgba(10,18,32,.14);
}
/* never filter/hide the icon art */
.all-services-item .image .icon img,
.all-services-item:hover .image .icon img{ filter:none !important; opacity:1 !important; }

/* EBS — animated banner text.
   The breadcrumb banner title + nav path now ease up and fade in on load, staggered so the
   title lands first. Respects prefers-reduced-motion. */
@keyframes ebsBannerUp{
  from{ opacity:0; transform:translate3d(0,26px,0); }
  to  { opacity:1; transform:none; }
}
@keyframes ebsBannerRule{
  from{ transform:scaleX(0); }
  to  { transform:scaleX(1); }
}
.breadcrumb-area .breadcrumb-title .title{
  animation: ebsBannerUp .9s cubic-bezier(.22,.9,.28,1) both;
}
/* accent rule that sweeps out from under the title */
.breadcrumb-area .breadcrumb-title .title::after{
  content:""; display:block; width:78px; height:4px; border-radius:3px;
  background:var(--primary); margin-top:18px; transform-origin:left center;
  animation: ebsBannerRule .75s cubic-bezier(.22,.9,.28,1) .32s both;
}
.breadcrumb-area .breadcrumb-content .bread-crumb{
  animation: ebsBannerUp .9s cubic-bezier(.22,.9,.28,1) .16s both;
}
@media (prefers-reduced-motion: reduce){
  .breadcrumb-area .breadcrumb-title .title,
  .breadcrumb-area .breadcrumb-title .title::after,
  .breadcrumb-area .breadcrumb-content .bread-crumb{ animation:none; }
}

/* EBS FIX — FAQ image pair "collapsed into each other".
   The template overlapped a fixed 432x284 second photo onto the first with margin-top:-160px,
   sized for its demo's TALL portrait photo. Both EBS photos are 3:2 landscape (1400x933), so
   at this column width the first image rendered only 401x267 and a -160px overlap swallowed
   60% of it — the pair read as one broken image. Its SVG mask (a shape filled with an embedded
   raster pattern) also chewed a ragged notch out of the corner.
   NOTE: responsive.css loads AFTER style.css and re-declares these margins at 992-1399px, so
   a plain margin fix here silently lost below 1400px. Anchoring the inset with absolute
   positioning (margins neutralised with !important) makes the composition identical at every
   breakpoint instead of depending on hand-tuned negative margins per screen size. */
.faq-area-one .faq-image{ position:relative; padding-bottom:100px; }
.faq-area-one .faq-image .image-one{ max-width:min(420px,100%); }
.faq-area-one .faq-image .image-one img{
  width:100%; height:430px; object-fit:cover; display:block; border-radius:8px;
}
.faq-area-one .faq-image .image-one::after{ top:50px; height:240px; width:18px; right:-28px; }
.faq-area-one .faq-image .image-two{
  position:absolute !important; right:0; bottom:0;
  margin:0 !important;                       /* beats responsive.css negative margins */
  width:min(300px,70%) !important; height:auto !important; aspect-ratio:4/3;
  -webkit-mask-image:none !important; mask-image:none !important;   /* drop the ragged mask */
  z-index:2; border-radius:10px; overflow:hidden;
  box-shadow:0 18px 40px rgba(10,18,32,.22);
}
.faq-area-one .faq-image .image-two img{
  width:100%; height:100%; object-fit:cover; display:block;
  border:6px solid #fff; border-radius:10px;
}
@media (max-width:991px){ .faq-area-one .faq-image{ margin-top:40px; } }
/* template hides the inset entirely below 576px — keep that, and drop the now-orphaned padding */
@media (max-width:575.98px){
  .faq-area-one .faq-image{ padding-bottom:0; }
  .faq-area-one .faq-image .image-one img{ height:300px; }
}

/* ==========================================================================
   EBS — Resources page: spec tables, download card, pending-documents block.
   Real product data ported from the canonical shop-floor reference so a
   specifier can check a section without calling. Dimensional/finish only —
   no capacity, fire or acoustic values are published anywhere here.
   ========================================================================== */
.ebs-h{ font-size:20px; margin:0 0 14px; color:#0a0a0a; }
.ebs-note{ font-size:14px; color:#5b6675; margin-top:10px; }
.ebs-tablewrap{ overflow-x:auto; border:1px solid #e4e9f2; border-radius:10px; background:#fff; }
.ebs-spec-table{ width:100%; border-collapse:collapse; font-size:15px; }
.ebs-spec-table.wide{ min-width:460px; }
.ebs-spec-table th{
  text-align:left; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:#0030d8; background:#f4f7fc; padding:11px 14px; white-space:nowrap; font-weight:700;
}
.ebs-spec-table td{ padding:10px 14px; border-top:1px solid #eef2f8; color:#3a4453; vertical-align:top; }
.ebs-spec-table tbody tr:nth-child(even) td{ background:#fbfcfe; }

/* download card */
.ebs-download{
  display:flex; flex-wrap:wrap; align-items:center; gap:22px;
  border:1px solid #e4e9f2; border-left:5px solid #0030d8; border-radius:12px;
  background:#fff; padding:24px 26px; margin-top:26px;
  box-shadow:0 14px 34px rgba(10,18,32,.07);
}
.ebs-download-icon{
  flex:0 0 auto; width:56px; height:56px; border-radius:12px; background:#eef2ff;
  display:flex; align-items:center; justify-content:center; color:#0030d8; font-size:24px;
}
.ebs-download-body{ flex:1 1 300px; }
.ebs-download-body h4{ font-size:20px; margin:0 0 6px; }
.ebs-download-body p{ margin:0 0 4px; color:#5b6675; font-size:15px; }
.ebs-download-body .ebs-meta{
  font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:#8a94a5; margin-top:8px;
}
.ebs-download-cta{ flex:0 0 auto; }

/* per-product spec card */
.ebs-spec-card{
  border:1px solid #e4e9f2; border-radius:12px; background:#fff; padding:22px 24px; height:100%;
}
.ebs-spec-card h4{ font-size:19px; margin:0 0 4px; }
.ebs-spec-card h4 span{
  display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:#0030d8; font-weight:600; margin-top:4px;
}
.ebs-spec-card > p{ color:#5b6675; font-size:15px; margin:10px 0 14px; }
.ebs-spec-card .ebs-spec-table{ border:1px solid #eef2f8; border-radius:8px; overflow:hidden; }
.ebs-spec-card .ebs-spec-table td:first-child{ color:#6b7688; width:45%; }
.ebs-apps{ font-size:13.5px; color:#6b7688; margin:14px 0 0; line-height:1.6; }
.ebs-apps strong{ color:#3a4453; }

/* honest "not published yet" block */
.ebs-pending{
  border:1px solid #e4e9f2; border-radius:12px; background:#f7f9fc; padding:28px 30px;
}
.ebs-pending h4{ font-size:20px; margin:0 0 10px; }
.ebs-pending > p{ color:#5b6675; font-size:15.5px; max-width:78ch; }
.ebs-pending ul{ margin:16px 0 22px; padding-left:20px; }
.ebs-pending li{ color:#3a4453; margin-bottom:8px; font-size:15px; }
.ebs-pending li strong{ color:#0a0a0a; }
@media (max-width:575px){
  .ebs-download{ padding:20px; }
  .ebs-download-cta{ flex:1 1 100%; }
  .ebs-download-cta .common-btn{ width:100%; text-align:center; }
}

/* ==========================================================================
   EBS FIX — header fits SIX nav items.
   Adding "Resources" pushed logo + nav + phone past the row at <1600px and the
   navbar wrapped onto two lines (About Us broke mid-phrase, social icons wrapped).
   Tighten the spacing progressively instead of letting it wrap. !important is
   required because responsive.css is loaded AFTER style.css and re-declares
   these margins at several breakpoints.
   ========================================================================== */
.header-area-one .navbar .container-fluid{ flex-wrap:nowrap; }
.header-area-one .navbar-nav{ flex-wrap:nowrap !important; }
.header-area-one .navbar-nav .nav-link{ white-space:nowrap; }
.header-area-one .header-right-info{ flex-wrap:nowrap; }
.header-area-one .header-right-info .help-number .info h6 a{ white-space:nowrap; }

@media (min-width:1200px) and (max-width:1599.98px){
  .header-area-one .navbar-nav{ margin-left:26px !important; }
  .header-area-one .navbar-nav .nav-link{ margin-right:15px !important; }
  .header-area-one .header-right-info .social ul li a{ margin-left:11px !important; }
  .header-area-one .header-right-info .help-number{ margin-left:18px !important; }
  .header-area-one .navbar-brand img{ max-width:196px !important; height:auto !important; }
}
/* below ~1200px the header social row is the first thing to go — it is
   duplicated in the footer, and the phone number matters more. */
@media (min-width:992px) and (max-width:1199.98px){
  .header-area-one .header-right-info .social{ display:none !important; }
  .header-area-one .navbar-nav{ margin-left:18px !important; }
  .header-area-one .navbar-nav .nav-link{ margin-right:12px !important; font-size:15px; }
  .header-area-one .navbar-brand img{ max-width:172px !important; height:auto !important; }
}
/* qualifier shown beside a spec value (e.g. "load + non-load-bearing"), preserved
   from the canonical note field so a value never reads broader than it is */
.ebs-qual{ display:block; font-size:12.5px; color:#8a94a5; font-weight:400; margin-top:2px; }

/* ==========================================================================
   EBS — real news system (48-post archive ported from ebsglobal.ca)
   Hub grid + category filter + article prev/next. Dates render only where the
   source post carried one — no invented dates anywhere.
   ========================================================================== */
.ebs-news-filter{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 34px; }
.ebs-news-filter button{
  border:1px solid #dbe2ee; background:#fff; color:#3a4453; border-radius:999px;
  padding:9px 18px; font-weight:600; font-size:14px; cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.ebs-news-filter button span{ color:#8a94a5; font-weight:500; margin-left:4px; }
.ebs-news-filter button:hover{ border-color:#0030d8; color:#0030d8; }
.ebs-news-filter button.on{ background:#0030d8; border-color:#0030d8; color:#fff; }
.ebs-news-filter button.on span{ color:rgba(255,255,255,.75); }

.ebs-news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
@media (max-width:991px){ .ebs-news-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:575px){ .ebs-news-grid{ grid-template-columns:1fr; } }
.ebs-news-card{
  background:#fff; border:1px solid #e4e9f2; border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:box-shadow .25s ease, transform .25s ease;
}
.ebs-news-card:hover{ box-shadow:0 18px 40px rgba(10,18,32,.12); transform:translateY(-3px); }
.ebs-news-card .thumb{ display:block; aspect-ratio:16/10; overflow:hidden; }
.ebs-news-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease; }
.ebs-news-card:hover .thumb img{ transform:scale(1.04); }
.ebs-news-card .body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.ebs-news-card .meta{ display:flex; gap:12px; align-items:center; margin:0 0 10px; font-size:12.5px; color:#8a94a5; }
.ebs-news-card .meta i{ margin-right:5px; }
.ebs-news-card .chip{
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:700;
  padding:4px 10px; border-radius:999px;
}
.chip-press{ background:#eef2ff; color:#0030d8; }
.chip-projects{ background:#e6f4ee; color:#0f6b47; }
.chip-insights{ background:#fdf3e2; color:#8a5a00; }
.ebs-news-card h4{ font-size:18.5px; line-height:1.3; margin:0 0 8px; }
.ebs-news-card h4 a{ color:#0a0a0a; }
.ebs-news-card h4 a:hover{ color:#0030d8; }
.ebs-news-card p{ font-size:14.5px; color:#5b6675; margin:0 0 14px; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ebs-news-card .read-more{ font-weight:700; color:#0a0a0a; font-size:13px; }
.ebs-news-card .read-more:hover{ color:#0030d8; }
.ebs-news-card .read-more i{ margin-left:8px; }

.ebs-postnav{ display:flex; gap:14px; margin-top:44px; border-top:1px solid #e4e9f2; padding-top:26px; }
.ebs-postnav .pn{ flex:1; border:1px solid #e4e9f2; border-radius:12px; padding:15px 18px;
  color:#0a0a0a; font-weight:600; font-size:15px; line-height:1.35;
  transition:border-color .2s ease, box-shadow .2s ease; }
.ebs-postnav .pn:hover{ border-color:#0030d8; box-shadow:0 10px 26px rgba(10,18,32,.08); }
.ebs-postnav .pn span{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:#0030d8; margin-bottom:6px; }
.ebs-postnav .pn.next{ text-align:right; }
@media (max-width:575px){ .ebs-postnav{ flex-direction:column; } }

/* ==========================================================================
   EBS — film + real plant footage
   The brand film is click-to-play (poster first, 4.1MB H.264 only loads on
   demand). The plant strip is REAL production footage: tiny muted loops.
   ========================================================================== */
.ebs-film{ position:relative; border-radius:16px; overflow:hidden; background:#0a1220;
  box-shadow:0 26px 60px rgba(10,18,32,.28); }
.ebs-film video{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.ebs-film .play{
  position:absolute; inset:0; width:100%; height:100%; border:0; cursor:pointer; padding:0;
  background:center/cover no-repeat; display:flex; align-items:center; justify-content:center;
}
.ebs-film .play::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(rgba(8,14,28,.18), rgba(8,14,28,.42)); transition:background .25s ease; }
.ebs-film .play:hover::before{ background:linear-gradient(rgba(8,14,28,.06), rgba(8,14,28,.3)); }
.ebs-film .play .btn-circle{
  position:relative; width:84px; height:84px; border-radius:50%; background:#0030d8; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:26px;
  box-shadow:0 14px 40px rgba(0,48,216,.45); transition:transform .25s ease;
}
.ebs-film .play:hover .btn-circle{ transform:scale(1.08); }
.ebs-film .play .btn-circle i{ margin-left:5px; }

.ebs-plant-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:991px){ .ebs-plant-strip{ grid-template-columns:repeat(2,1fr); } }
.ebs-plant-clip{ border-radius:12px; overflow:hidden; position:relative; background:#0a1220; }
.ebs-plant-clip video{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.ebs-plant-clip figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 14px 10px;
  background:linear-gradient(transparent, rgba(8,14,28,.78));
  color:#fff; font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
}

/* scroll-reveal: subtle rise+fade on cards/sections, disabled for reduced motion */
.ebs-reveal{ opacity:0; transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.22,.9,.28,1), transform .6s cubic-bezier(.22,.9,.28,1); }
.ebs-reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .ebs-reveal{ opacity:1; transform:none; transition:none; }
  .ebs-news-card, .ebs-news-card .thumb img{ transition:none; }
}

/* EBS — YouTube lite embed: real press/channel videos. Nothing loads from YouTube
   until the visitor presses play (then youtube-nocookie iframe swaps in). */
.ebs-yt{ position:relative; border-radius:16px; overflow:hidden; background:#0a1220;
  aspect-ratio:16/9; box-shadow:0 26px 60px rgba(10,18,32,.28); }
.ebs-yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.ebs-yt .play{ position:absolute; inset:0; width:100%; height:100%; border:0; cursor:pointer;
  background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; }
.ebs-yt .play::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(rgba(8,14,28,.14), rgba(8,14,28,.4)); transition:background .25s ease; }
.ebs-yt .play:hover::before{ background:linear-gradient(rgba(8,14,28,.04), rgba(8,14,28,.28)); }
.ebs-yt .play .btn-circle{ position:relative; width:84px; height:84px; border-radius:50%;
  background:#0030d8; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:26px; box-shadow:0 14px 40px rgba(0,48,216,.45); transition:transform .25s ease; }
.ebs-yt .play:hover .btn-circle{ transform:scale(1.08); }
.ebs-yt .play .btn-circle i{ margin-left:5px; }
.ebs-yt-credit{ margin-top:12px; font-size:13px; color:#8a94a5; text-align:center; }
.ebs-yt-credit a{ color:#0030d8; }
.blog-details-information .ebs-yt{ margin:26px 0 8px; border-radius:12px; }
.blog-details-information .ebs-yt-credit{ text-align:left; margin-bottom:18px; }

/* EBS FIX — tiny phones (<=320px): the off-canvas mobile menu is a fixed 320px wide,
   which overflows the viewport by ~15px on iPhone-SE-class screens. Cap it. */
.mobile-menu-main{ max-width:86vw; }

/* ==========================================================================
   EBS — 60,000 SQ FT SCALE SHOWCASE
   The CEO's ask: make an abstract number a physical sensation. Devices:
   full-bleed (breaks the 1200px container every other section obeys), a
   giant numeral, and a sticky headline that stays pinned while four
   full-height photographs of the plant scroll past it — so the number is on
   screen for four screens of building. Pure CSS, no JS, no library.
   Rival LEFF asserts "factory-controlled prefabrication" on every page but
   has no plant to photograph; this section is the one thing they cannot copy.
   ========================================================================== */
/* ==========================================================================
   EBS — THE PLANT
   Contained, not full-bleed, on purpose. The largest genuine EBS photograph
   available is ~1600px on its long edge, so nothing here is allowed to render
   wider than its native width: the hero sits inside the container and the
   three supporting shots sit at roughly a third of it. Earlier versions blew
   720px stills up to a 890px full-height column, which is why they looked soft.
   ========================================================================== */
.ebs-plant{ background:#0b1220; color:#e9edf5; padding:96px 0 104px; }
.ebs-plant .ebs-eyebrow{ color:#7f9bff; }

.ebs-plant-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:28px 56px; align-items:end; margin-bottom:42px;
}
.ebs-plant-headline h2{
  margin:10px 0 0; color:#fff; font-weight:700; line-height:.94;
  font-size:clamp(46px,6.2vw,92px); letter-spacing:-.025em;
}
.ebs-plant-headline h2 span{
  display:block; margin-top:16px; color:#9aa6bb; font-weight:500;
  font-size:clamp(17px,1.6vw,25px); letter-spacing:0; line-height:1.3;
}
.ebs-plant-lede p{ margin:0; max-width:52ch; color:#c3ccdb; font-size:17px; line-height:1.72; }
.ebs-plant-addr{
  margin-top:18px !important; color:#7f9bff !important; font-size:12.5px !important;
  letter-spacing:.15em; text-transform:uppercase; font-weight:600;
}

.ebs-plant figure{ margin:0; }
.ebs-plant img{
  display:block; width:100%; height:auto; object-fit:cover;
  border-radius:14px; background:#111a2b;
}
.ebs-plant figcaption{ margin-top:13px; font-size:13.5px; line-height:1.5; color:#9aa6bb; }

.ebs-plant-hero img{ aspect-ratio:16/9; }
.ebs-plant-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:36px; }
.ebs-plant-grid img{ aspect-ratio:4/3; }

.ebs-plant-foot{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:34px 48px; align-items:center;
  margin-top:54px; padding-top:38px; border-top:1px solid rgba(255,255,255,.13);
}
.ebs-plant-range{ margin:0; max-width:62ch; font-size:15.5px; line-height:1.7; color:#c3ccdb; }
.ebs-plant-range a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.ebs-plant-range a:hover{ color:#7f9bff; }

@media (max-width:991px){
  .ebs-plant{ padding:72px 0 78px; }
  .ebs-plant-head{ grid-template-columns:1fr; align-items:start; gap:20px; }
  .ebs-plant-grid{ grid-template-columns:1fr 1fr; gap:20px; margin-top:28px; }
  .ebs-plant-grid figure:nth-child(3){ grid-column:1 / -1; }
  .ebs-plant-grid figure:nth-child(3) img{ aspect-ratio:16/9; }
  .ebs-plant-foot{ grid-template-columns:1fr; justify-items:start; }
}
@media (max-width:575px){
  .ebs-plant-hero img{ aspect-ratio:3/2; }
  .ebs-plant-grid{ grid-template-columns:1fr; }
  .ebs-plant-grid figure:nth-child(3) img{ aspect-ratio:4/3; }
}

/* ==========================================================================
   EBS — THE FILM (named human, sound on) + THE LINE (seven stations)
   Every video on leff.ca is muted and no audio exists anywhere on their site.
   A named person with a job title, talking while the line runs behind him,
   is the one proof that cannot be bought from a theme. The station strip
   starts at COIL — one step upstream of anything LEFF can claim, because
   they buy finished steel and EBS rolls its own.
   ========================================================================== */
.ebs-film-band{ background:#0e1626; color:#fff; padding:100px 0; }
.ebs-film-band .ebs-eyebrow{ margin-bottom:14px; }
.ebs-film-band h3{ color:#fff; font-size:clamp(30px,4vw,52px); line-height:1.06; margin:0 0 16px; }
.ebs-film-band p.lede{ color:#b9c4d3; font-size:17px; line-height:1.6; max-width:56ch; margin:0; }
.ebs-nameplate{
  display:inline-flex; align-items:center; gap:12px; margin-top:22px;
  border-left:3px solid #0030d8; padding:6px 0 6px 14px;
}
.ebs-nameplate b{ display:block; font-size:16px; color:#fff; font-weight:700; line-height:1.2; }
.ebs-nameplate span{ display:block; font-size:13px; color:#7f9bff; letter-spacing:.1em; text-transform:uppercase; margin-top:3px; }

.ebs-line-strip{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(210px,1fr);
  gap:12px; overflow-x:auto; padding:4px 0 14px; scroll-snap-type:x proximity;
}
.ebs-line-strip::-webkit-scrollbar{ height:6px; }
.ebs-line-strip::-webkit-scrollbar-thumb{ background:#33425a; border-radius:3px; }
.ebs-station{ scroll-snap-align:start; }
.ebs-station .vid{
  position:relative; border-radius:10px; overflow:hidden; background:#0a1220; aspect-ratio:1/1;
}
.ebs-station video{ width:100%; height:100%; object-fit:cover; display:block; }
.ebs-station .no{
  position:absolute; top:10px; left:12px; font-size:12px; font-weight:700; color:#fff;
  letter-spacing:.1em; text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.ebs-station h6{ color:#fff; font-size:15px; margin:12px 0 3px; font-weight:600; }
.ebs-station p{ color:#8a94a5; font-size:13.5px; margin:0; line-height:1.45; }
@media (max-width:575px){ .ebs-film-band{ padding:70px 0; } }

/* ---- article photo galleries (EBS's own photographs, placed on the post they belong to) ---- */
.ebs-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0 8px}
.ebs-gallery figure{margin:0}
.ebs-gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:#eef1f6}
.ebs-gallery.tall img{aspect-ratio:3/4}
.ebs-gallery figcaption{font-size:13px;color:#6b7482;margin-top:8px;line-height:1.45}
.ebs-gallery-note{font-size:12.5px;color:#7a8496;margin:0 0 22px}
@media (max-width:575px){.ebs-gallery{grid-template-columns:1fr}}

/* ==========================================================================
   Ask EBS — floating assistant
   ========================================================================== */
/* the template's scroll-to-top button sat exactly under the launcher: stack it above */
.scroll-to-top.show{ bottom:96px; right:28px; }

.ebs-ai-mark{display:inline-block;flex:none;width:34px;height:34px;border-radius:50%;
  background:#0030d8 url('/assets/img/logo/mark-white.png') center/64% auto no-repeat}

.ebs-ai-launch{position:fixed;right:22px;bottom:22px;z-index:9998;display:inline-flex;align-items:center;gap:10px;
  height:54px;padding:0 22px 0 10px;border:0;border-radius:999px;background:#0030d8;color:#fff;cursor:pointer;
  font:600 15px/1 'Rubik',sans-serif;letter-spacing:.01em;box-shadow:0 12px 32px rgba(0,48,216,.36),0 2px 6px rgba(10,18,32,.18);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.ebs-ai-launch .ebs-ai-mark{background-color:#fff;background-image:url('/assets/img/logo/mark-color.png')}
.ebs-ai-launch:hover{background:#0026ad;transform:translateY(-2px);box-shadow:0 16px 38px rgba(0,48,216,.44),0 2px 6px rgba(10,18,32,.2)}
.ebs-ai-launch:focus-visible{outline:3px solid #7fd4ff;outline-offset:3px}
.ebs-ai-launch.is-open{transform:scale(.94);box-shadow:0 6px 18px rgba(0,48,216,.3)}

.ebs-ai-panel{position:fixed;right:22px;bottom:90px;z-index:9999;width:404px;max-width:calc(100vw - 28px);
  height:min(640px,calc(100vh - 120px));display:flex;flex-direction:column;overflow:hidden;background:#fff;
  border:1px solid #dfe4ee;border-radius:18px;box-shadow:0 30px 80px rgba(10,18,32,.3),0 4px 14px rgba(10,18,32,.1);
  animation:ebsAiIn .22s cubic-bezier(.2,.8,.3,1)}
.ebs-ai-panel[hidden]{display:none}
@keyframes ebsAiIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

.ebs-ai-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 14px 16px;
  background:#0a1220;color:#fff}
.ebs-ai-id{display:flex;align-items:center;gap:11px;min-width:0}
.ebs-ai-id b{display:block;font:700 17px/1.15 'Rajdhani',sans-serif;letter-spacing:.02em}
.ebs-ai-id span{display:flex;align-items:center;gap:6px;margin-top:3px;font:400 11.5px/1.3 'Rubik',sans-serif;color:#9aa6bb}
.ebs-ai-tools{display:flex;gap:4px;flex:none}
.ebs-ai-tools button{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:#9aa6bb;cursor:pointer;transition:background .15s,color .15s}
.ebs-ai-tools button:hover{background:rgba(255,255,255,.1);color:#fff}
.ebs-ai-tools button:focus-visible{outline:2px solid #7fd4ff;outline-offset:1px}

.ebs-ai-log{flex:1;overflow-y:auto;padding:18px 16px 8px;display:flex;flex-direction:column;gap:10px;background:#f6f8fc;overscroll-behavior:contain}
.ebs-ai-msg{max-width:88%;padding:11px 14px;border-radius:15px;font:400 14px/1.6 'Rubik',sans-serif;overflow-wrap:anywhere}
.ebs-ai-ai{align-self:flex-start;background:#fff;border:1px solid #e1e6f0;color:#222c3a;border-bottom-left-radius:5px}
.ebs-ai-you{align-self:flex-end;background:#0030d8;color:#fff;border-bottom-right-radius:5px;white-space:pre-wrap}
.ebs-ai-welcome{max-width:100%;background:#fff}
.ebs-ai-msg p{margin:0 0 8px}
.ebs-ai-msg p:last-child,.ebs-ai-msg ul:last-child,.ebs-ai-msg ol:last-child{margin-bottom:0}
.ebs-ai-msg ul,.ebs-ai-msg ol{margin:2px 0 8px;padding-left:19px}
.ebs-ai-msg li{margin:3px 0;padding-left:2px}
.ebs-ai-msg li::marker{color:#0030d8}
.ebs-ai-msg strong{font-weight:600;color:#0a1220}
.ebs-ai-ai a{color:#0030d8;font-weight:500;text-decoration:underline;text-underline-offset:2px}
.ebs-ai-ai a:hover{color:#0026ad}

.ebs-ai-actions{display:flex;flex-wrap:wrap;gap:7px;margin:-2px 0 2px}
.ebs-ai-actions a,.ebs-ai-actions button{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:9px;border:1px solid #0030d8;
  background:#fff;color:#0030d8;font:500 12.5px/1 'Rubik',sans-serif;text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.ebs-ai-actions a::after{content:"\2192";font-size:13px;line-height:1}
.ebs-ai-actions a[download]::after{content:"\2193"}
.ebs-ai-actions a:first-child{background:#0030d8;color:#fff}
.ebs-ai-actions a:hover,.ebs-ai-actions button:hover{background:#0026ad;border-color:#0026ad;color:#fff}

.ebs-ai-chips{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 4px}
.ebs-ai-chips button{border:1px solid #cdd6e6;background:#fff;color:#26303f;border-radius:999px;padding:8px 13px;text-align:left;
  font:400 12.5px/1.3 'Rubik',sans-serif;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.ebs-ai-chips button:hover{border-color:#0030d8;color:#0030d8;background:#f1f5ff}
.ebs-ai-starters{flex-direction:column;gap:8px}
.ebs-ai-starters button{border-radius:12px;padding:11px 14px;font-size:13.5px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.ebs-ai-starters button::after{content:"\2192";color:#0030d8;font-size:15px}

.ebs-ai-typing{display:inline-flex;gap:4px;padding:4px 2px}
.ebs-ai-typing i{width:7px;height:7px;border-radius:50%;background:#9aa6bb;animation:ebsAiBlink 1.2s infinite}
.ebs-ai-typing i:nth-child(2){animation-delay:.18s}
.ebs-ai-typing i:nth-child(3){animation-delay:.36s}
@keyframes ebsAiBlink{0%,80%,100%{opacity:.25;transform:none}40%{opacity:1;transform:translateY(-2px)}}

.ebs-ai-form{display:flex;align-items:flex-end;gap:8px;margin:10px 12px 0;padding:6px 6px 6px 14px;border:1px solid #cdd6e6;border-radius:16px;background:#fff;
  transition:border-color .15s,box-shadow .15s}
.ebs-ai-form:focus-within{border-color:#0030d8;box-shadow:0 0 0 3px rgba(0,48,216,.12)}
.ebs-ai-form textarea{flex:1;min-width:0;border:0;outline:0;resize:none;background:transparent;padding:8px 0;max-height:120px;
  font:400 14px/1.45 'Rubik',sans-serif;color:#0a1220}
.ebs-ai-form textarea::placeholder{color:#8c96a8}
.ebs-ai-form button{flex:none;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:#0030d8;color:#fff;cursor:pointer;transition:background .15s,opacity .15s}
.ebs-ai-form button:hover{background:#0026ad}
.ebs-ai-form.is-busy button{opacity:.45;pointer-events:none}
.ebs-ai-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:9px 16px 12px;background:#fff;
  font:400 10.5px/1.45 'Rubik',sans-serif;color:#7a8496}
.ebs-ai-foot a{color:#0030d8;font-weight:600;white-space:nowrap;text-decoration:none}
.ebs-ai-foot a:hover{text-decoration:underline}

@media (max-width:575px){
  .scroll-to-top.show{bottom:82px;right:16px}
  .ebs-ai-launch{right:14px;bottom:14px;height:50px;font-size:14px;padding-right:18px}
  .ebs-ai-launch .ebs-ai-mark{width:32px;height:32px}
  .ebs-ai-panel{inset:0;width:auto;max-width:none;height:auto;border:0;border-radius:0;animation:none}
  .ebs-ai-head{padding-top:max(14px,env(safe-area-inset-top))}
  .ebs-ai-foot{padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .ebs-ai-form textarea{font-size:16px}           /* stops iOS zooming the page on focus */
  html.ebs-ai-open,html.ebs-ai-open body{overflow:hidden}
  html.ebs-ai-open .ebs-ai-launch{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ebs-ai-panel,.ebs-ai-typing i{animation:none}
  .ebs-ai-launch,.ebs-ai-launch:hover{transition:none;transform:none}
}
@media print{.ebs-ai-launch,.ebs-ai-panel{display:none!important}}


/* ---- header: quote button replaces the social row (social lives in the footer) ---- */
.header-quote-btn{ margin-left:28px; padding:13px 26px; border-radius:5px; background-color:var(--primary);
  color:var(--white); font-weight:700; font-family:var(--link-font-family); white-space:nowrap;
  transition:background-color .2s ease; }
.header-quote-btn:hover,.header-quote-btn:focus{ background-color:var(--black); color:var(--white); }
@media (max-width:1299.98px){ .header-quote-btn{ display:none; } }


/* ---- product pages (/products/*) ---- */
.ebs-prod-fig{ margin:0; }
.ebs-prod-fig img,.ebs-prod-fig video{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:5px; background:#eef1f6; }
.ebs-prod-fig figcaption{ margin-top:10px; font-size:14px; line-height:1.45; color:#6b7688; }
.project-information .ebs-prod-dl{ margin-top:22px; display:flex; flex-direction:column; gap:10px; }
.project-information .ebs-prod-dl a{ display:flex; align-items:center; gap:10px; padding:12px 16px; border:1px solid var(--border-colour);
  border-radius:6px; font-family:var(--link-font-family); font-weight:700; font-size:16px; color:var(--black); transition:border-color .2s,color .2s; }
.project-information .ebs-prod-dl a:hover,.project-information .ebs-prod-dl a:focus{ border-color:var(--primary); color:var(--primary); }
.project-information .ebs-prod-dl i{ color:var(--primary); width:18px; text-align:center; }
.ebs-prod-table{ margin:44px 0 0; }
.ebs-prod-table .title{ font-size:32px; margin-bottom:18px; }
.ebs-prod-table .ebs-spec-table td:first-child{ width:auto; white-space:nowrap; }
.ebs-prod-table .ebs-spec-table td{ letter-spacing:.02em; }
.ebs-prod-note{ margin:12px 0 0; font-size:14px; color:#6b7688; }
.ebs-prod-cta{ margin:44px 0 10px; padding:24px 28px; border-radius:8px; background:var(--section-background);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.ebs-prod-cta p{ margin:0; font-size:18px; font-weight:600; color:var(--black); }
.ebs-prod-cta .common-btn{ margin-top:0; }


/* ---- about page: product links, story, why cold-formed steel ---- */
.ebs-about-sec{ padding:100px 0; }
.ebs-about-sec.alt{ background:var(--section-background); }
.ebs-about-sec .section-title-one{ margin-bottom:40px; }
.ebs-prod-links{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ebs-prod-link{ display:flex; gap:16px; align-items:flex-start; padding:24px; background:#fff; border:1px solid var(--border-colour);
  border-radius:8px; color:var(--body-font-color); transition:border-color .2s, box-shadow .2s; }
.ebs-prod-link:hover,.ebs-prod-link:focus{ border-color:var(--primary); box-shadow:0 14px 34px rgba(10,24,60,.10); color:var(--body-font-color); }
.ebs-prod-link img{ width:46px; height:46px; flex:none; }
.ebs-prod-link h4{ font-size:22px; margin:0 0 6px; color:var(--heading-font-color); }
.ebs-prod-link p{ margin:0; font-size:15px; line-height:1.55; }
.ebs-prod-link .go{ margin-left:auto; color:var(--primary); align-self:center; padding-left:6px; }
.ebs-story{ list-style:none; margin:0; padding:0 0 0 2px; border-left:2px solid var(--primary); }
.ebs-story li{ position:relative; padding:0 0 30px 32px; }
.ebs-story li:last-child{ padding-bottom:0; }
.ebs-story li::before{ content:""; position:absolute; left:-9px; top:5px; width:16px; height:16px; border-radius:50%;
  background:var(--primary); box-shadow:0 0 0 4px #fff; }
.ebs-story .when{ display:block; font-family:var(--heading-font-family); font-weight:700; font-size:24px; color:var(--primary); line-height:1.2; }
.ebs-story p{ margin:6px 0 0; }
.ebs-story a{ color:var(--primary); text-decoration:underline; text-underline-offset:3px; }
.ebs-why{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ebs-why > div{ padding:26px; background:#fff; border-radius:8px; border:1px solid var(--border-colour); }
.ebs-why h4{ font-size:22px; margin:0 0 8px; }
.ebs-why p{ margin:0; font-size:15px; line-height:1.6; }
.working-process-item-two .title p{ margin:6px 0 0; font-size:15px; line-height:1.5; }
@media (max-width:991.98px){ .ebs-prod-links,.ebs-why{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:575.98px){ .ebs-prod-links,.ebs-why{ grid-template-columns:1fr; } .ebs-about-sec{ padding:70px 0; } }

.ebs-spec-more{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-family:var(--link-font-family); font-weight:700; color:var(--primary); }
.ebs-spec-more:hover{ color:var(--black); }