@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/*=============================
	01. Variable CSS
===============================*/
:root {
    --tg-body-font-family: 'Roboto', sans-serif;
    --tg-heading-font-family: 'Inter', sans-serif;
    --tg-primary-color: #34336c;
    --tg-secondary-color: #22252F;
    --tg-section-background: #FFF9F6;
    --tg-body-font-color: #616161;
    --tg-heading-font-color: #22252F;
    --tg-paragraph-color: #616161;
    --tg-body-font-size: 16px;
    --tg-body-font-weight: 400;
    --tg-heading-font-weight: 700;
    --tg-body-line-height: 1.8;
    --tg-heading-line-height: 1.2;
    --tg-blue: #0d6efd;
    --tg-indigo: #6610f2;
    --tg-purple: #6f42c1;
    --tg-pink: #d63384;
    --tg-red: #dc3545;
    --tg-orange: #fd7e14;
    --tg-yellow: #ffc107;
    --tg-green: #198754;
    --tg-teal: #20c997;
    --tg-cyan: #0dcaf0;
    --tg-white: #ffffff;
    --tg-gray: #A0A0A0;
    --tg-gray-two: #737272;
    --tg-gray-three: #949494;
    --facebook: #3b5998;
    --twitter: #00acee;
    --linkedin: #1976d2;
    --pinterest: #3b5998;
    --youtube: #c4302b;
    --skype: #00aff0;
}
body {
	/* font-family: var(--tg-body-font-family); */
	font-weight: var(--tg-body-font-weight);
	font-size: var(--tg-body-font-size);
	line-height: var(--tg-body-line-height);
	color: var(--tg-body-font-color);
	font-style: normal;
}
img,
.img {
	max-width: 100%;
	transition: all 0.3s ease-out 0s;
}
.f-left {
	float: left
}
.f-right {
	float: right
}
.fix {
	overflow: hidden
}
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;
}

a:hover,
.portfolio-cat a:hover,
.footer -menu li a:hover {
	color: #34336c;
	text-decoration: none;
}
a,
button {
	color: #34336c;
	outline: medium none;
	text-decoration: none;
}
.btn:focus,
button:focus,
input:focus,
input:focus,
textarea,
textarea:focus {
	outline: 0
}
.uppercase {
	text-transform: uppercase;
}
.capitalize {
	text-transform: capitalize;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--tg-heading-font-family);
	color: var(--tg-heading-font-color);
	margin-top: 0px;
	margin-bottom: .7rem;
	font-style: normal;
	line-height: var(--tg-heading-line-height);
	font-weight: var(--tg-heading-font-weight);
	text-transform: inherit;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	color: inherit;
}
h1 {
	font-size: 2.5rem;
}
h2 {
	font-size: 2rem;
}
h3 {
	font-size: 1.75rem;
}
h4 {
	font-size: 1.5rem;
}
h5 {
	font-size: 1.25rem;
}
h6 {
	font-size: 1rem;
}
.list-wrap {
	margin: 0px;
	padding: 0px;
}
.list-wrap li {
	list-style: none
}
p {
	/*font-size: var(--tg-body-font-size);*/
	font-size: 16px;
	font-weight: var(--tg-body-font-weight);
	line-height: var(--tg-body-line-height);
	/*color: var(--tg-paragraph-color);*/
	color:#2a2a2a;
	margin-bottom: 15px;
}
hr {
	border-bottom: 1px solid var(--tg-primary-color);
	border-top: 0 none;
	margin: 30px 0;
	padding: 0;
}
label {
	color: var(--tg-body-font-color);
	cursor: pointer;
	font-size: 16px;
	font-weight: 400;
}
*::-moz-selection {
	background: var(--tg-primary-color);
	color: var(--tg-white);
	text-shadow: none;
}
::-moz-selection {
	background: var(--tg-primary-color);
	color: var(--tg-white);
	text-shadow: none;
}
::selection {
	background: var(--tg-primary-color);
	color: var(--tg-white);
	text-shadow: none;
}
*::-moz-placeholder {
	color: var(--tg-body-font-color);
	font-size: var(--tg-body-font-size);
	opacity: 1;
}
*::placeholder {
	color: var(--tg-body-font-color);
	font-size: var(--tg-body-font-size);
	opacity: 1;
}
.theme-overlay {
	position: relative
}
.theme-overlay::before {
	background: var(--tg-primary-color) none repeat scroll 0 0;
	content: "";
	height: 100%;
	left: 0;
	opacity: 0.6;
	position: absolute;
	top: 0;
	width: 100%;
}
.separator {
	border-top: 1px solid var(--tg-primary-color);
}

/* Bootstrap 5 */
.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;
}

/*=============================
	1. Button style
===============================*/
.btn {
    user-select: none;
    -moz-user-select: none;
    background: #34336c none repeat scroll 0 0;
    border: medium none;
    border-radius: 5px;
    color: var(--tg-white);
    cursor: pointer;
    display: inline-flex;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    margin-bottom: 0;
    padding: 18px 34px;
    text-align: center;
    text-transform: uppercase;
    touch-action: manipulation;
    transition: all 0.3s ease;
    vertical-align: middle;
    white-space: nowrap;
    font-family: var(--tg-heading-font-family);
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.btn:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-transform: scale(0.2, 1);
    transform: scale(0.2, 1);
    background-color: var(--tg-secondary-color);
}
.btn:hover::before {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
}
.btn:hover {
    color: var(--tg-white);
}
.btn.btn-two {
    background: var(--tg-white);
    color: var(--tg-secondary-color);
}
.btn.btn-two:hover {
    color: var(--tg-white);
}
.breadcrumb > .active {
	color: var(--tg-primary-color);
}

/* scrollUp */
.scroll-top {
    width: 35px;
    height: 35px;
    line-height: 35px;
    position: fixed;
    bottom: -10%;
    right: 30px;
    font-size: var(--tg-body-font-size);
    border-radius: 6px;
    z-index: 99;
    color: var(--tg-white);
    text-align: center;
    cursor: pointer;
    background: var(--tg-primary-color);
    transition: 1s ease;
    border: none;
}
.scroll-top.open {
	bottom: 30px;
}
.scroll-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-top:hover {
	background: var(--tg-secondary-color);
}


/*=============================
	02. Header
===============================*/
.custom-container {
    max-width: 1830px;
}
.custom-container-two {
    max-width: 1750px;
}
.transparent-header {
	position: absolute;
	left: 0;
	top: 0px;
	width: 100%;
	z-index: 9;
	height: auto;
}

/* header-top */
.header-top-wrap {
    padding: 9px 0;
    background: var(--tg-secondary-color);
}
.header-top-left span {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    color: #D1D1D1;
}
.header-top-left span i {
    margin-right: 5px;
    color: var(--tg-white);
}
.header-top-social .list-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}
.header-top-social .list-wrap li a {
    width: 28px;
    height: 28px;
    border-radius: 50px;
    border: 1px solid var(--tg-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--tg-gray);
    line-height: 1;
}
.header-top-social .list-wrap li a:hover {
    background: var(--tg-white);
    border-color: var(--tg-white);
    color: var(--tg-secondary-color);
}

/* header-logo-area */
.header-logo-area {
    padding: 22px 0 28px;
    background: var(--tg-white);
}
.header-info-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
}
.header-info-wrap .header-info-item {
    display: flex;
    align-items: center;
    border-radius: 10px;
    padding: 17px 25px;
    transition: .3s linear;
}
.header-info-wrap .header-info-item .icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 5px;
    border: 1px solid var(--tg-primary-color);
    font-size: 20px;
    color: var(--tg-primary-color);
    margin-right: 10px;
    transition: .3s ease-in-out;
}
.header-info-wrap .header-info-item .icon svg {
    width: 22px;
}
.header-info-wrap .header-info-item .content span {
    display: block;
    line-height: 1;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--tg-primary-color);
    margin-bottom: 8px;
    transition: .3s ease-in-out;
}
.header-info-wrap .header-info-item .content a {
    display: block;
    line-height: 1;
    font-size: 15px;
    font-weight: 500;
    color: var(--tg-secondary-color);
}
.header-info-wrap .header-info-item:hover .content a:hover,
.header-info-wrap .header-info-item.active .content a:hover {
    color: var(--tg-secondary-color);
}
.header-info-wrap .header-info-item:hover,
.header-info-wrap .header-info-item.active {
    background: var(--tg-primary-color);
}
.header-info-wrap .header-info-item:hover .icon,
.header-info-wrap .header-info-item.active .icon {
    color: var(--tg-white);
    border-color: var(--tg-white);
    border-radius: 50%;
}
.header-info-wrap .header-info-item:hover .content a,
.header-info-wrap .header-info-item:hover .content span,
.header-info-wrap .header-info-item.active .content a,
.header-info-wrap .header-info-item.active .content span {
    color: var(--tg-white);
}


/* menu */
.menu-area {
    background: rgba(34, 37, 47, 0.40);
}
.menu-nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.logo img {
    max-height: 68px;
}
.logo.sticky-logo {
    display: none;
}
.navbar-wrap {
	display: flex;
	flex-grow: 1;
}
.navbar-wrap ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 0;
    margin: 0;
}
.navbar-wrap > ul > li {
    list-style: none;
	display: block;
	position: relative;
    margin-right: 22px;
}
.navbar-wrap ul li:last-child {
    margin-right: 0;
}
.navbar-wrap ul li a {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tg-white);
    padding: 40px 0;
    display: block;
    line-height: 1;
    position: relative;
    z-index: 1;
    /* font-family: var(--tg-heading-font-family); */
    font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
}
.navbar-wrap > ul > li.active > a,
.navbar-wrap > ul > li:hover > a {
	color: var(--tg-primary-color);
}
.main-menu .navigation li.menu-item-has-children .dropdown-btn {
    display: none;
}
.header-action > ul {
	display: flex;
	align-items: center;
	margin-left: 10px;
}
.header-action > ul li {
	position: relative;
	margin-left: 30px;
}
.header-action ul li:first-child {
	margin-left: 0;
}
.header-action ul li a {
	color: var(--tg-heading-font-color);
	font-size: 14px;
}
.header-action ul li.header-search a {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tg-secondary-color);
    color: var(--tg-white);
    border: 2px solid var(--tg-primary-color);
    font-size: 16px;
}
.header-action ul li.header-search a:hover {
    background: var(--tg-primary-color);
}
.header-action .header-btn .btn {
	color: var(--tg-white);
	font-size: 16px;
	font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
}
.navbar-wrap ul li .sub-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    min-width: 230px;
    border: 1px solid #f5f5f5;
    background: var(--tg-white);
    margin: 0 0;
    transform: scale(1, 0);
    transform-origin: 0 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-box-shadow: 0px 30px 70px 0px rgba(137, 139, 142, 0.15);
    -moz-box-shadow: 0px 30px 70px 0px rgba(137, 139, 142, 0.15);
    box-shadow: 0px 30px 70px 0px rgba(137, 139, 142, 0.15);
    padding: 18px 0;
    display: block;
    visibility: hidden;
    opacity: 0;
    z-index: 9;
    border-radius: 0 0 5px 5px;
}
.navbar-wrap ul li .sub-menu .sub-menu {
	right: auto;
	left: 100%;
	top: 0;
}
.navbar-wrap ul li .sub-menu li {
	margin-left: 0;
	text-align: left;
	display: block;
}
.navbar-wrap ul li .sub-menu li a {
    /* padding: 9px 15px 9px 25px; */
    padding: 10px 10px 5px 12px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--tg-secondary-color);
    text-transform: capitalize;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
}
.navbar-wrap ul li .sub-menu li a::before {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: #34336c;
    transition: .3s ease-in-out;
}
.navbar-wrap ul li .sub-menu > li.active > a::before,
.navbar-wrap ul li .sub-menu li a:hover::before {
    width: 10px;
    margin-right: 5px;
}
.navbar-wrap ul li .sub-menu > li.active > a,
.navbar-wrap ul li .sub-menu li a:hover {
    color: var(--tg-primary-color);
}
.navbar-wrap ul li:hover > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
}
.sticky-menu {
	position: fixed;
	left: 0;
	margin: auto;
	top: 0;
	width: 100%;
	z-index: 99;
	background: var(--tg-white);
	-webkit-animation: 1000ms ease-in-out 0s normal none 1 running fadeInDown;
	animation: 1000ms ease-in-out 0s normal none 1 running fadeInDown;
	-webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
	box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
	border-radius: 0;
}
.sticky-menu .navbar-wrap ul li a {
    color: var(--tg-secondary-color);
}
.sticky-menu .navbar-wrap > ul > li.active > a,
.sticky-menu .navbar-wrap > ul > li:hover > a {
    color: var(--tg-primary-color);
}

/* header-two */
.header-style-two .navbar-wrap ul {
    margin: 0 auto;
}
.header-style-two .navbar-wrap ul li a {
    padding: 52px 0;
}
.header-style-two .menu-area {
    background: rgba(0, 0, 0, 0.40);
}
.header-style-two .header-action .header-btn .btn {
    color: var(--tg-primary-color);
}
.header-style-two .sticky-menu {
    background: var(--tg-white);
}
.header-style-two .sticky-menu .header-action .header-btn .btn {
    background: var(--tg-primary-color);
    color: var(--tg-white);
}
.header-style-two .sticky-menu .logo {
    display: none;
}
.header-style-two .sticky-menu .logo.sticky-logo {
    display: block;
}

/* header-three */
.header-top-wrap-two {
    padding: 16px 0;
}
.header-top-menu .list-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;
}
.header-top-menu .list-wrap li {
    position: relative;
}
.header-top-menu .list-wrap li::before {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    right: -13px;
    top: 50%;
    transform: translateY(-50%);
    /*background: var(--tg-white);*/
}
.header-top-menu .list-wrap li:last-child::before {
    display: none;
}
.header-top-menu .list-wrap li a {
    font-size: 14px;
    color: var(--tg-white);
    display: block;
    line-height: 1;
}
.header-top-menu .list-wrap li a:hover {
    color: var(--tg-primary-color);
}
.header-top-social-two .list-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}
.header-top-social-two .list-wrap li a {
    color: #ffffff;
    font-size: 14px;
    line-height: 1;
}
.header-top-social-two .list-wrap li a:hover {
    color: var(--tg-white);
}
.header-style-three .logo img {
    max-height: 50px;
}
.header-style-three .navbar-wrap ul {
    margin: 0 0 0 auto;
}
.header-style-three .header-action > ul {
    margin-left: 35px;
}
.header-style-three .menu-area {
    background: transparent;
}
.header-style-three .menu-nav {
    background: var(--tg-white);
    border-radius: 10px;
    padding: 0 20px;
}
.header-style-three .navbar-wrap ul li a {
    color: var(--tg-secondary-color);
}
.header-style-three .navbar-wrap > ul > li.active > a,
.header-style-three .navbar-wrap > ul > li:hover > a {
    color: #34336c;
}
.header-style-three .sticky-menu {
    background: var(--tg-white);
}

/* header-four */
.header-style-four .navbar-wrap ul {
    margin: 0 auto;
}
.header-style-four .menu-area {
    background: transparent;
    padding: 30px 0;
}
.header-style-four .menu-area.sticky-menu {
    padding: 0;
    background: var(--tg-white);
}
.header-style-four .logo img {
    max-height: 50px;
}
.header-style-four .menu-area.sticky-menu .logo {
    display: none;
}
.header-style-four .menu-area.sticky-menu .logo.d-none {
    display: block !important;
}
.header-style-four .header-action ul li.header-search a {
    width: auto;
    height: auto;
    display: block;
    border-radius: 0;
    background: transparent;
    color: var(--tg-white);
    border: none;
    font-size: 25px;
    line-height: 1;
}
.header-style-four .header-action ul li.header-search a:hover {
    color: var(--tg-primary-color);
}
.offcanvas-menu .menu-tigger {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    background: var(--tg-white);
    border-radius: 5px;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
}
.offcanvas-menu .menu-tigger span {
    width: 30px;
    height: 3px;
    border-radius: 3px;
    background: var(--tg-primary-color);
    transition: .15s linear;
}
.offcanvas-menu .menu-tigger span:nth-child(3) {
    width: 23px;
    margin-left: 7.5px;
}
.offcanvas-menu .menu-tigger:hover span:nth-child(3) {
    margin-left: 0;
    width: 30px;
}
.offcanvas-menu .menu-tigger:hover span:nth-child(1) {
    width: 23px;
    margin-left: 7.5px;
}
.header-style-four .menu-area.sticky-menu .header-action ul li.header-search a {
    color: var(--tg-primary-color);
}
.header-style-four .menu-area.sticky-menu .offcanvas-menu .menu-tigger {
    background: var(--tg-primary-color);
}
.header-style-four .menu-area.sticky-menu .offcanvas-menu .menu-tigger span {
    background: var(--tg-white);
}



/*=============================
	03. Mobile Menu
===============================*/
.nav-outer .mobile-nav-toggler {
	position: relative;
	float: right;
	font-size: 40px;
	line-height: 50px;
	cursor: pointer;
	display: none;
	color: var(--tg-white);
	margin-right: 30px;
	top: 15px;
}
.nav-logo img {
	width: 150px;
}
.mobile-menu {
	position: fixed;
	right: 0;
	top: 0;
	width: 300px;
	padding-right: 30px;
	max-width: 100%;
	height: 100%;
	z-index: 99;
	border-radius: 0px;
	transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-moz-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-ms-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86)e;
	-o-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	-webkit-transform: translateX(101%);
	-ms-transform: translateX(101%);
	transform: translateX(101%);
}
.mobile-menu .navbar-collapse {
	display: block !important;
}
.mobile-menu .nav-logo {
	position: relative;
	padding: 30px 25px;
	text-align: left;
}
.mobile-menu-visible {
	overflow: hidden;
}
.mobile-menu-visible .mobile-menu {
	-webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}
.mobile-menu .navigation li.current>a:before {
	height: 100%;
}
.menu-backdrop {
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	transition: all 700ms ease;
	-moz-transition: all 700ms ease;
	-webkit-transition: all 700ms ease;
	-ms-transition: all 700ms ease;
	-o-transition: all 700ms ease;
	opacity: 0;
	visibility: hidden;
	background: rgba(0, 0, 0, 0.5);
}
.mobile-menu-visible .menu-backdrop {
	opacity: 1;
	visibility: visible;
}
.mobile-menu .menu-box {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	max-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	background: var(--tg-white);
	padding: 0px 0px;
	z-index: 5;
	box-shadow: -9px 0 14px 0px rgb(0 0 0 / 6%);
}
.mobile-menu-visible .mobile-menu .menu-box {
	opacity: 1;
	visibility: visible;
}
.mobile-menu .close-btn {
    position: absolute;
    right: 15px;
    top: 28px;
    line-height: 30px;
    width: 35px;
    text-align: center;
    font-size: 20px;
    color: #292b37;
    cursor: pointer;
    z-index: 10;
    -webkit-transition: all 0.9s ease;
    -o-transition: all 0.9s ease;
    transition: all 0.9s ease;
}
.mobile-menu-visible .mobile-menu .close-btn {
	-webkit-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
}
.mobile-menu .navigation {
	position: relative;
	display: block;
	width: 100%;
	float: none;
	margin: 0;
	padding: 0;
}
.mobile-menu .navigation ul {
	padding: 0;
	margin: 0;
}
.mobile-menu .navigation li {
	position: relative;
	display: block;
	border-top: 1px solid rgb(0 0 0 / 10%);
}
.mobile-menu .navigation:last-child {
	border-bottom: 1px solid rgb(0 0 0 / 10%);
}
.mobile-menu .navigation li>ul>li:first-child {
	border-top: 1px solid rgb(0 0 0 / 10%);
}
.mobile-menu .navigation li > a {
    position: relative;
    display: block;
    line-height: 20px;
    padding: 10px 0px 10px 19px;
    font-size: 16px;
    font-weight: 600;
    color: var(--tg-heading-font-color);
    text-transform: uppercase;
    -webkit-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    border: none;
}
.mobile-menu .navigation li ul li > a {
    font-size: 16px;
    margin-left: 20px;
    text-transform: capitalize;
<!doctype
    html>
<html class="no-js" lang="en">
    

<head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Flowlines Engineering Pvt Ltd</title>
        <meta name="description" content="Madexry - Factory & Industrial HTML Template">
        <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
        <!-- Place favicon.ico in the root directory -->

        <!-- CSS here -->
        <link rel="stylesheet" href="assets/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/css/animate.min.css">
        <link rel="stylesheet" href="assets/css/magnific-popup.css">
        <link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
        <link rel="stylesheet" href="assets/css/flaticon.css">
        <link rel="stylesheet" href="assets/css/odometer.css">
        <link rel="stylesheet" href="assets/css/tg-cursor.css">
        <link rel="stylesheet" href="assets/css/splitting.css">
        <link rel="stylesheet" href="assets/css/slick.css">
        <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
        <link rel="stylesheet" href="assets/css/default.css">
        <link rel="stylesheet" href="assets/css/style.css">
        <link rel="stylesheet" href="assets/css/responsive.css">
    </head>
 <style>
 .logo-item{
 background: #fff;
    -ms-border-radius: 6px;
    border: 1px solid rgb(52 51 108);
    text-align: center;
 }
 </
    style>
    <body>

        <!-- Preloader-start -->
        <div id="preloader">
            <div class="ta-preloader-block">
                <div class="ta-spinner-eff">
                    <div class="ta-bar ta-bar-top"></div>
                    <div class="ta-bar ta-bar-right"></div>
                    <div class="ta-bar ta-bar-bottom"></div>
                    <div class="ta-bar ta-bar-left"></div>
                </div>
            </div>
        </div>
        <!-- Preloader-start-end -->

  <!-- Scroll-top -->
        <button class="scroll-top scroll-to-target" data-target="html">
            <i class="fas fa-angle-up"></i>
        </button>
        <!-- Scroll-top-end-->

        <!-- header-area -->
        <header class="header-style-three transparent-header">
            <div class="header-top-wrap-two">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <div class="header-top-menu">
                                <ul class="list-wrap">
                                    <li style="color:#fff;"><i class="fa fa-envelope"></i> info@flowlines.in</li>
                                    <li style="color:#fff;"><i class="fa fa-phone-alt"></i> +91 95000 41629</li>
         <li style="color:#fff;"><i class="fas fa-map-marker-alt"></i> Ambattur Industrial Estate , Chennai</li>
                                    
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="header-top-social-two">
                                <ul class="list-wrap">
                                    <li>
                                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fab fa-twitter"></i></a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fab fa-instagram"></i></a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fab fa-pinterest-p"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="sticky-header" class="menu-area">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="menu-wrap">
                                <nav class="menu-nav">
                                    <div class="logo">
                                        <a href="index.html"><img src="assets/img/flowlines/logo-1.png" alt="Logo"></a>
                                    </div>
                                    <div class="navbar-wrap main-menu d-none d-lg-flex">
                                        <ul class="navigation">
                                            <li class="active"><a href="index.html">Home</a></li>
           <li class="menu-item-has-children"><a href="#">About Us</a>
            <ul class="sub-menu">
                                                    <li><a href="about.html">About Flowlines</a></li>
                                                    <li><a href="md.html">Managing Director</a></li>
                                                </ul>
           </li>
                                            <li class="menu-item-has-children"><a href="#">Products</a>
                                                <ul class="sub-menu">
                                                    <li class="menu-item-has-children"><a href="#">Manufacturing</a>
              <ul class="sub-menu">
               <li><a href="#">Hydraulic Press</a></li>
               <li><a href="#">Hydraulic Cylinder/ Test Ring</a></li>
               <li><a href="#">Cylinder Seal Testing</a></li>
               <li><a href="#">Hydraulic Power Pack</a></li>
               <li><a href="#">Hydraulic Cylinder</a></li>
               <li><a href="#">Hydraulic Scissor Lift</a></li>
               <li><a href="#">Gearless Motor / Homelift</a></li>
               <li><a href="#">Hydraulic Goodslift</a></li>
               <li><a href="#">Valves Leak Test Machine</a></li>
              </ul>
             </li>
                                                    <li><a href="#">Trading</a>
              <ul class="sub-menu">
               <li><a href="#">Quick Die Clamp</a></li>
               
              </ul>
             </li>
             <li><a href="#">Veljan</a>
              <ul class="sub-menu">
               <li><a href="#">Hydraulic 
               Pumps & Valves</a></li>
               
              </ul>
             </li>
             <li><a href="#">Servo</a>
              <ul class="sub-menu">
               <li><a href="#">Motors & Servo Drivers</a></li>
               
              </ul>
             </li>
             <li><a href="#">Piryder</a>
              <ul class="sub-menu">
               <li><a href="#">Hydraulic Hoses</a></li>
               
              </ul>
             </li>
             <li><a href="#">Hydraulic High Pressure Power Pack</a></li>
             <li><a href="#">Hydraulic Wrinches</a></li>
             <li><a href="#">Hydraulic Boosterpump</a></li>
             <li><a href="#">Compact AC & DC Powerpacks</a></li>
             <li><a href="#">Booker Internal Gear Pumps</a></li>
             <li><a href="#">Mobile Control Valves</a></li>
                                                </ul>
                                            </li>
                                            
                                            <li><a href="#">Applications</a></li>
           <li><a href="clients.html">Clients</a></li>
                                            
                                            <li><a href="contact.html">Contact</a></li>
                                        </ul>
                                    </div>
                                    <div class="header-action d-none d-md-block">
                                        <ul class="list-wrap">
                                            <li class="header-btn"><a href="contact.html" class="btn">Enquiry</a></li>
                                        </ul>
                                    </div>
                                    <div class="mobile-nav-toggler"><i class="fas fa-bars"></i></div>
                                </nav>
                            </div>

                            <!-- Mobile Menu  -->
                            <div class="mobile-menu">
                                <nav class="menu-box">
                                    <div class="close-btn"><i class="fas fa-times"></i></div>
                                    <div class="nav-logo">
                                        <a href="index.html"><img src="assets/img/flowlines/logo-1.png" alt="Logo"></a>
                                    </div>
                                    <div class="menu-outer">
                                        <!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header-->
                                    </div>
                                    <div class="social-links">
                                        <ul class="clearfix list-wrap">
                                            <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                            <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                            <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                                            <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                                            <li><a href="#"><i class="fab fa-youtube"></i></a></li>
                                        </ul>
                                    </div>
                                </nav>
                            </div>
                            <div class="menu-backdrop"></div>
                            <!-- End Mobile Menu -->

                        </div>
                    </div>
                </div>
            </div>

            <!-- header-search -->
            <div class="search-popup-wrap" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="search-wrap text-center">
                    <div class="container">
                        <div class="row">
                            <div class="col-12">
                                <div class="search-form">
                                    <form action="#">
                                        <input type="text" placeholder="Enter your keyword...">
                                        <button class="search-btn"><i class="fas fa-search"></i></button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="search-backdrop"></div>
            <!-- header-search-end -->

        </header>
        <!-- header-area-end -->

        <!-- main-area -->
        <main class="fix">

            <!-- slider-area -->
            <section class="slider-area-two">
                <div class="slider-active-two">
                    <div class="single-slider slider-bg-two" data-background="assets/img/flowlines/banner.jpg">
                        <div class="container">
                            <div class="row justify-content-center">
                                <div class="col-lg-10">
                                    <div class="slider-content-two">
                                        <span class="sub-title" data-animation-in="fadeInUp" data-delay-in=".2" data-duration-in="1.5">Welcome to Flowlines</span>
                                        <h2 class="title" data-animation-in="fadeInUp" data-delay-in=".4" data-duration-in="1.5">Innovating manufacturing, shaping the future</h2>
                                        <div class="slider-btn">
                                            <a href="services.html" class="btn" data-animation-in="fadeInLeft" data-delay-in=".6" data-duration-in="1.5">ABOUT US</a>
                                            <a href="services.html" class="btn btn-two" data-animation-in="fadeInRight" data-delay-in=".6" data-duration-in="1.5">OUR PRODUCTS</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="single-slider slider-bg-two" data-background="assets/img/flowlines/banner2.jpg">
                        <div class="container">
                            <div class="row justify-content-center">
                                <div class="col-lg-10">
                                    <div class="slider-content-two">
                                       
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slider-nav"></div>
            </section>
            <!-- slider-area-end -->

            <!-- services-area -->
            <!--section class="services-area-three">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-lg-4 col-md-6">
                            <div class="services-item-three wow fadeInUp" data-wow-delay=".6s">
                                <div class="services-icon-three">
                                    <i class="flaticon-save-time"></i>
                                </div>
                                <div class="services-content-three">
                                    <h4 class="title"><a href="services-details.html">Save Your Time And Money</a></h4>
                                    <a href="services-details.html" class="link-arrow"><i class="fas fa-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="services-item-three active wow fadeInUp" data-wow-delay=".8s">
                                <div class="services-icon-three">
                                    <i class="flaticon-costumer"></i>
                                </div>
                                <div class="services-content-three">
                                    <h4 class="title"><a href="services-details.html">Work With Our Expert Team</a></h4>
                                    <a href="services-details.html" class="link-arrow"><i class="fas fa-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <div class="services-item-three wow fadeInUp" data-wow-delay="1s">
                                <div class="services-icon-three">
                                    <i class="flaticon-certificate"></i>
                                </div>
                                <div class="services-content-three">
                                    <h4 class="title"><a href="services-details.html">Certificate Work Experience</a></h4>
                                    <a href="services-details.html" class="link-arrow"><i class="fas fa-arrow-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section-->
            <!-- services-area-end -->
   
   <!-- about-area -->
            <section class="about-area pt-90 pb-90" data-animation="animationContainer">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-lg-8">
                            <div class="section-title text-center title-style-two mb-50">
        <span class="sub-title">About Company</span>
                                <h2 class="title" data-splitting="chars" data-animation="innerAnimated">FLOWLINES ENGINEERING <br>PVT LTD</h2>
                            </div>
                        </div>
                    </div>
                    <div class="row align-items-center justify-content-center">
                        <div class="col-lg-6 col-md-8">
                            <div class="about-img-wrap">
                                <img src="assets/img/images/about_img01.jpg" alt="">
                                <img src="assets/img/images/about_img02.jpg" alt="">
                                <a href="https://www.youtube.com/watch?v=1iIZeIy7TqM" class="play-btn popup-video"><i class="fas fa-play"></i></a>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="about-content">
                                <p style="text-align:justify;">Flowlines Engineering Pvt. Ltd., established in 1989, is a leading Manufacturing solutions company based in India. Flowlines specializes in offering complete machine automation and control solutions for hydraulic, pneumatic, and electro-mechanical applications.  We serve machine builders and industrial end users with a broad selection of machine technology from  the world's leading manufacturers.
        </p>
        <p style="text-align:justify;">
Our team of Design engineers designs and fabricates complete engineered systems, including hydraulic power units, electrical control panels, pneumatic panels  & aluminum framing. Our advanced components and system solutions are found in a wide variety of industrial applications such as wind energy, solar energy, process control and more…..</p>
<p style="text-align:justify;">
 We have tie ups with Technology leaders in the space of Hydraulics, Pneumatics and Controls - like Bosch Rexroth, Bucher and Lapp Kabel. This way our young team of engineers make sure that the industry solutions we provide are of the highest quality, saves power and gives quicker time to value.
</p>
                                
                                <div class="about-content-bottom">
                                    <a href="about.html" class="btn">Discover MORE</a>
                                    <!--<a href="tel:0123456789" class="call-btn"><i class="fas fa-phone-alt"></i>1-888-452-1505</a>-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- about-area-end -->
   

            <!-- counter-area -->
            <section class="counter-area-three pb-90">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-lg-3 col-md-4 col-sm-6">
                            <div class="counter-item counter-item-two">
                                <div class="counter-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65 65" fill="none">
                                        <path d="M32.5 40.6248C42.5965 40.6248 50.7812 32.7432 50.7812 23.0207C50.7812 13.2982 42.5965 5.4165 32.5 5.4165C22.4035 5.4165 14.2188 13.2982 14.2188 23.0207C14.2188 32.7432 22.4035 40.6248 32.5 40.6248Z" stroke="currentcolor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
                                        <path d="M20.3666 36.6164L20.3396 56.6039C20.3396 59.0414 22.0459 60.2331 24.1584 59.231L31.4167 55.7914C32.0125 55.4935 33.0146 55.4935 33.6104 55.7914L40.8958 59.231C42.9813 60.206 44.7146 59.0414 44.7146 56.6039V36.1289" stroke="currentcolor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                </div>
                                <div class="counter-content">
                                    <h2 class="count"><span class="odometer" data-count="400"></span>+</h2>
                                    <p>Satisfied Clients</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-4 col-sm-6">
                            <div class="counter-item counter-item-two">
                                <div class="counter-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" fill="none">
                                        <path d="M33.4999 28.4495V35.2744C33.4999 40.9744 31.2249 43.2494 25.5249 43.2494H18.725C13.05 43.2494 10.75 40.9744 10.75 35.2744V28.4495C10.75 22.7745 13.025 20.4995 18.725 20.4995H25.5499C31.2249 20.4995 33.4999 22.7745 33.4999 28.4495Z" stroke="currentcolor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M43.2498 18.6995V25.5244C43.2498 31.2244 40.9748 33.4994 35.2748 33.4994H33.4998V28.4494C33.4998 22.7744 31.2248 20.4995 25.5249 20.4995H20.4999V18.6995C20.4999 12.9995 22.7749 10.7495 28.4748 10.7495H35.2998C40.9748 10.7495 43.2498 13.0245 43.2498 18.6995Z" stroke="currentcolor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M51.9998 34.5005C51.9998 44.1754 44.1748 52.0004 34.4999 52.0004L37.1249 47.6254" stroke="currentcolor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M2 19.4999C2 9.82496 9.82496 2 19.4999 2L16.8749 6.37498" stroke="currentcolor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </div>
                                <div class="counter-content">
                                    <h2 class="count"><span class="odometer" data-count="56"></span>+</h2>
                                    <p>Products</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-4 col-sm-6">
                            <div class="counter-item counter-item-two">
                                <div class="counter-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49 49" fill="none">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.125 1.35417C8.125 0.995019 8.26767 0.650582 8.52163 0.396626C8.77558 0.142671 9.12002 0 9.47917 0H39.2708C39.63 0 39.9744 0.142671 40.2284 0.396626C40.4823 0.650582 40.625 0.995019 40.625 1.35417V2.70833H47.3958C47.755 2.70833 48.0994 2.851 48.3534 3.10496C48.6073 3.35892 48.75 3.70335 48.75 4.0625V12.1875C48.75 13.9832 48.0366 15.7054 46.7669 16.9752C45.4971 18.245 43.7749 18.9583 41.9792 18.9583H39.7001C37.6133 24.8625 32.2116 29.2012 25.7292 29.7361V37.9167H35.2083C35.5675 37.9167 35.9119 38.0593 36.1659 38.3133C36.4198 38.5672 36.5625 38.9117 36.5625 39.2708V47.3958C36.5625 47.755 36.4198 48.0994 36.1659 48.3534C35.9119 48.6073 35.5675 48.75 35.2083 48.75H13.5417C13.1825 48.75 12.8381 48.6073 12.5841 48.3534C12.3302 48.0994 12.1875 47.755 12.1875 47.3958V39.2708C12.1875 38.9117 12.3302 38.5672 12.5841 38.3133C12.8381 38.0593 13.1825 37.9167 13.5417 37.9167H23.0208V29.7361C16.5398 29.2012 11.1367 24.8625 9.0499 18.9583H6.77083C4.9751 18.9583 3.25291 18.245 1.98313 16.9752C0.713354 15.7054 0 13.9832 0 12.1875V4.0625C0 3.70335 0.142671 3.35892 0.396626 3.10496C0.650582 2.851 0.995019 2.70833 1.35417 2.70833H8.125V1.35417ZM37.9167 13.5417V2.70833H10.8333V13.5417C10.8333 21.0207 16.8959 27.0833 24.375 27.0833C31.8541 27.0833 37.9167 21.0207 37.9167 13.5417ZM40.625 5.41667V16.25H41.9792C43.0566 16.25 44.0899 15.822 44.8518 15.0601C45.6137 14.2983 46.0417 13.2649 46.0417 12.1875V5.41667H40.625ZM2.70833 5.41667H8.125V16.25H6.77083C5.69339 16.25 4.66008 15.822 3.89821 15.0601C3.13634 14.2983 2.70833 13.2649 2.70833 12.1875V5.41667ZM14.8958 40.625V46.0417H33.8542V40.625H14.8958Z" fill="currentcolor"/>
                                    </svg>
                                </div>
                                <div class="counter-content">
                                    <h2 class="count"><span class="odometer" data-count="2"></span>+</h2>
                                    <p>Winning Award</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-4 col-sm-6">
                            <div class="counter-item counter-item-two">
                                <div class="counter-icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" fill="none">
                                        <path d="M44.9999 17.9C44.8499 17.875 44.675 17.875 44.525 17.9C41.075 17.775 38.325 14.95 38.325 11.45C38.325 7.875 41.1999 5 44.7749 5C48.3499 5 51.2249 7.9 51.2249 11.45C51.1999 14.95 48.4499 17.775 44.9999 17.9Z" stroke="currentcolor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M42.4249 36.0999C45.8499 36.6749 49.6249 36.0749 52.2749 34.2999C55.7999 31.9499 55.7999 28.0999 52.2749 25.7499C49.5999 23.9749 45.7749 23.3749 42.3499 23.9749" stroke="currentcolor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M14.9247 17.9C15.0747 17.875 15.2497 17.875 15.3997 17.9C18.8497 17.775 21.5997 14.95 21.5997 11.45C21.5997 7.875 18.7247 5 15.1497 5C11.5747 5 8.69971 7.9 8.69971 11.45C8.72471 14.95 11.4747 17.775 14.9247 17.9Z" stroke="currentcolor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M17.4998 36.0999C14.0748 36.6749 10.2999 36.0749 7.64985 34.2999C4.12485 31.9499 4.12485 28.0999 7.64985 25.7499C10.3249 23.9749 14.1498 23.3749 17.5748 23.9749" stroke="currentcolor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M29.9997 36.5748C29.8497 36.5498 29.6747 36.5498 29.5247 36.5748C26.0747 36.4498 23.3247 33.6248 23.3247 30.1248C23.3247 26.5498 26.1997 23.6748 29.7747 23.6748C33.3497 23.6748 36.2247 26.5748 36.2247 30.1248C36.1997 33.6248 33.4497 36.4748 29.9997 36.5748Z" stroke="currentcolor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M22.7248 44.4494C19.1998 46.7994 19.1998 50.6494 22.7248 52.9994C26.7248 55.6744 33.2748 55.6744 37.2748 52.9994C40.7998 50.6494 40.7998 46.7994 37.2748 44.4494C33.2998 41.7994 26.7248 41.7994 22.7248 44.4494Z" stroke="currentcolor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </div>
                                <div class="counter-content">
                                    <h2 class="count"><span class="odometer" data-count="150"></span>+</h2>
                                    <p>Expert Teams</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- counter-area-end -->
   <!-- project-area -->
            <section class="project-area" data-animation="animationContainer" style="color:#fff;">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-lg-8">
                            <div class="section-title text-center title-style-two mb-50">
        <span class="sub-title" style="color:#fff;">Our Product Ranges</span>
                                <h2 class="title" data-splitting="chars" data-animation="innerAnimated" style="color:#fff;">DELIVERING WITH EXCELLENCE</h2>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="project-item-wrap">
                    <div class="container custom-container">
                        <div class="row project-active">
                            <div class="col-lg-3">
                                <div class="project-item">
                                    <div class="project-thumb">
                                        <img src="assets/img/flowlines/4.jpg" alt="">
                                    </div>
                                    <div class="project-content">
                                       
                                        <h4 class="title" style="text-transform:uppercase;font-size:17px;"><a href="#">Hydraulic Power Pack </a></h4>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="project-item active">
                                    <div class="project-thumb">
                                       <img src="assets/img/flowlines/3.jpg" alt="">
                                    </div>
                                    <div class="project-content">
                                       
                                        <h4 class="title" style="text-transform:uppercase;font-size:17px;"><a href="#">Hydraulic Presses</a></h4>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="project-item">
                                    <div class="project-thumb">
                                       <img src="assets/img/flowlines/1.jpg" alt="">
                                    </div>
                                    <div class="project-content">
                                       
                                        <h4 class="title" style="text-transform:uppercase;font-size:17px;"><a href="#">Hydraulic Cylinder</a></h4>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="project-item">
                                    <div class="project-thumb">
                                        <img src="assets/img/flowlines/5.jpg" alt="">
                                    </div>
                                    <div class="project-content">
                                       
                                        <h4 class="title" style="text-transform:uppercase;font-size:17px;"><a href="#">Hydraulic Gear Pump</a></h4>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="project-item">
                                    <div class="project-thumb">
                                        <img src="assets/img/flowlines/2.jpg" alt="">
                                    </div>
                                    <div class="project-content">
                                        
                                        <h4 class="title" style="text-transform:uppercase;font-size:17px;"><a href="#">Trochoid pump</a></h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- project-area-end -->
            

            <!-- work-area -->
            <section class="work-area pt-100 pb-55" data-animation="animationContainer" style="background-color:#34336c1c;">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-lg-8">
                            <div class="section-title title-style-three text-center mb-60">
                                <span class="sub-title">work process</span>
                                <h2 class="title" data-splitting="chars" data-animation="innerAnimated" style="text-transform:uppercase;">We Offer Customized Solution <br> For 
Every Industry</h2>
                            </div>
                        </div>
                    </div>
                    <div class="work-item-wrap">
                        <div class="row justify-content-center">
                            <div class="col-lg-3 col-md-6">
                                <div class="work-item">
                                    <div class="work-icon">
                                        <i class="flaticon-case-study"></i>
                                    </div>
                                    <div class="work-content">
                                       
                                        <h2 class="title">Highest Competency</h2>
                                        <p>Our immense exposure in the industry allows us to operate at highest competency in meeting our customer's expectations.</p><br>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="work-item active">
                                    <div class="work-icon">
                                        <i class="flaticon-power-button"></i>
                                    </div>
                                    <div class="work-content">
                                      
                                        <h2 class="title">Customized Solutions</h2>
                                        <p>We do offer complete range of customization of Automation SPMs & Hydraulic Systems according to the need of the customer</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="work-item">
                                    <div class="work-icon">
                                        <i class="flaticon-order"></i>
                                    </div>
                                    <div class="work-content">
                                        
                                        <h2 class="title">Modern Technology</h2>
                                        <p>We rely on modern day technology, tools & facilities to bring in utmost care in design to manufacturing of Automation SPM Machineries</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="work-item">
                                    <div class="work-icon">
                                        <i class="flaticon-award"></i>
                                    </div>
                                    <div class="work-content">
                                       
                                        <h2 class="title">Service Support</h2>
                                        <p>Our Customer support is the forte on which our business has evolved over years</p><br><br>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- work-area-end -->

            <!-- choose-area -->
            <!--section class="choose-area pt-50 pb-50" data-animation="animationContainer">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-xl-6 col-lg-8">
                            <div class="section-title text-center mb-50">
                                <span class="sub-title">
                                    
                                </span>
                                <h2 class="title" data-splitting="chars" data-animation="innerAnimated">WE PROVIDE SOLUTIONS ON</h2>
                            </div>
                        </div>
                    </div>
                    <div class="row align-items-center justify-content-center">
                        <div class="col-lg-6 col-md-9">
                            <div class="choose-img-wrap">
                                <img src="assets/img/images/choose_img.jpg" alt="">
                                <h4 class="year-experience">13+ <span>years experience</span></h4>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="faq-wrap">
                                    <div class="accordion" id="accordionExample">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header">
                                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                    Factory Automation Solutions
                                                </button>
                                            </h2>
                                            <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                                                <div class="accordion-body">
                                                    <p>We specialize in designing, manufacturing, installing, supplying, and servicing a comprehensive range of factory automation products. With our skilled team of engineers and modern manufacturing facilities, we partner with world-renowned principals to deliver cutting-edge solutions. </p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-item">
                                            <h2 class="accordion-header">
                                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                                    Process Automation Services
                                                </button>
                                            </h2>
                                            <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                                                <div class="accordion-body">
                                                    <p>Our expertise lies in providing installation, supply, maintenance, testing, and servicing for process automation products. Backed by a proficient team of engineers and state-of-the-art facilities, we ensure top-notch service in collaboration with renowned industry principals. </p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="accordion-item">
                                            <h2 class="accordion-header">
                                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                                    Equipment Maintenance
                                                </button>
                                            </h2>
                                            <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                                                <div class="accordion-body">
                                                    <p>We offer installation, supply, maintenance, and servicing for a variety of equipment through our dedicated division. With a focus on quality and reliability, our team of engineers and modern service equipment ensure optimal performance. </p>
                                                </div>
                                            </div>
                                        </div>
          <div class="accordion-item">
                                            <h2 class="accordion-header">
                                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseThree">
                                                    Hydraulic Solutions
                                                </button>
                                            </h2>
                                            <div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                                                <div class="accordion-body">
                                                    <p>From design and manufacturing to installation, supply, maintenance, and servicing, we provide comprehensive hydraulic solutions. Leveraging our wide product range and skilled engineers, we ensure high-quality service in partnership with leading principals. </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
            </section-->
            <!-- choose-area-end -->
   <!-- brand-area -->
            <section class="brand-area pt-30 pb-0" data-animation="animationContainer">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-xl-6 col-lg-8">
                            <div class="section-title title-style-three text-center mb-60">
                                <span class="sub-title">Key Customers</span>
                                <h2 class="title" data-splitting="chars" data-animation="innerAnimated">OUR CLIENTS</h2>
                            </div>
                        </div>
                    </div>
           
            <!-- brand-area-end -->
                </div>
            </section>
            
            <div class="brand-area-two" style="padding-bottom:50px;">
                <div class="container custom-container">
                    <div class="row brand-active">
                        <div class="col-12">
                            <div class="brand-item-two logo-item">
                                <img src="assets/img/flowlines/1.webp" alt="">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="brand-item-two logo-item">
                                <img src="assets/img/flowlines/2.webp" alt="">
                            </div>
                        </div>
                        
                        <div class="col-12">
                            <div class="brand-item-two logo-item">
                                <img src="assets/img/flowlines/3.webp" alt="">
                            </div>
                        </div>
      <div class="col-12">
                            <div class="brand-item-two logo-item">
                                <img src="assets/img/flowlines/8.webp" alt="">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="brand-item-two logo-item">
                                <img src="assets/img/flowlines/5.webp" alt="">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="brand-item-two logo-item">
                                <img src="assets/img/flowlines/7.webp" alt="">
                            </div>
                        </div>
      <div class="col-12">
                            <div class="brand-item-two logo-item">
                                <img src="assets/img/flowlines/4.webp" alt="">
                            </div>
                        </div>
      
                       
                    </div>
                </div>
            </div>
            <!-- brand-area-end -->

           

        </main>
        <!-- main-area-end -->

        <!-- footer-area -->
        <footer>
            <div class="footer-area">
                
                <div class="footer-top">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-4 col-sm-6">
                                <div class="footer-widget">
                                    <h4 class="fw-title">ABOUT US</h4>
                                    <div class="footer-contact">
                                        <p style="color:#fff;">Flowlines Engineering Pvt. Ltd., established in 1989, is a leading Manufacturing solutions company based in India. Flowlines specializes in offering complete machine automation and control solutions for hydraulic, pneumatic, and electro-mechanical applications. </p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-lg-2 col-sm-6">
                                <div class="footer-widget">
                                    <h4 class="fw-title">QUICK LINKS</h4>
                                    <div class="footer-link">
                                        <ul class="list-wrap">
                                            <li><a href="#">About Us</a></li>
                                            <li><a href="#">Director Message</a></li>
                                            <li><a href="#">Applications</a></li>
                                            <li><a href="#">Clients</a></li>
                                            <li><a href="#">Contact Us</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
       <div class="col-lg-3 col-sm-6">
                                <div class="footer-widget">
                                    <h4 class="fw-title">PRODUCTS</h4>
                                    <div class="footer-link">
                                        <ul class="list-wrap">
                                            <li><a href="#">Hydraulic Press</a></li>
           <li><a href="#">Cylinder Seat Testing</a></li>
           <li><a href="#">Hydraulic Scissor Lift</a></li>
           <li><a href="#">Valves Leak Test Machine</a></li>
           <li><a href="#">Hydraulic Goodslift</a></li>
           
           
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-sm-6">
                                <div class="footer-widget">
                                    <h4 class="fw-title">GET IN TOUCH</h4>
                                    <div class="footer-contact">
                                        <ul class="list-wrap">
                                            <li><i class="fas fa-map-marker-alt"></i>No: 296-B,Sector, 2, Anna St, North Phase, Ambattur Industrial Estate, Chennai, Tamil Nadu 600098</li>
                                            <li><i class="far fa-envelope"></i><a href="mailto: info@flowlines.in"> info@flowlines.in</a></li>
                                            <li><i class="fas fa-phone-alt"></i><a href="tel:+919500041629">+91 95000 41629</a></li>
                                            <li><i class="fa fa-globe"></i>www.flowlines.in</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footer-bottom">
                    <div class="container">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <div class="copyright-text">
                                    <p>Copyright © 2024 Flowlines Engineering Pvt Ltd, All Rights Reserved . Desgined By <a href="#"><img src="assets/img/flowlines/vjm.webp"></a></p>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="footer-social">
                                    <ul class="list-wrap">
                                        <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                        <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                                        <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                                        <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- footer-area-end -->


        <!-- JS here -->
        <script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/isotope.pkgd.min.js"></script>
        <script src="assets/js/imagesloaded.pkgd.min.js"></script>
        <script src="assets/js/jquery.magnific-popup.min.js"></script>
        <script src="assets/js/jquery.odometer.min.js"></script>
        <script src="assets/js/jquery.appear.js"></script>
        <script src="assets/js/swiper-bundle.min.js"></script>
        <script src="assets/js/slick.min.js"></script>
        <script src="assets/js/slick-animation.min.js"></script>
        <script src="assets/js/splitting.js"></script>
        <script src="assets/js/animation.js"></script>
        <script src="assets/js/ajax-form.js"></script>
        <script src="assets/js/tg-cursor.min.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/main.js"></script>
    </body>

</html>;
    font-family: Roboto, Helvetica, Arial, Verdana, sans-serif;
    /* font: 500 16px / 17px "Roboto", Helvetica, Arial, Verdana, sans-serif; */
}
.mobile-menu .navigation li ul li ul li a {
    margin-left: 37px;
}
.mobile-menu .navigation li ul li ul li ul li a {
    margin-left: 60px;
}
.mobile-menu .navigation li > a:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 0;
	-webkit-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
.mobile-menu .navigation li.menu-item-has-children .dropdown-btn {
	position: absolute;
	right: 15px;
	top: 6px;
	width: 32px;
	height: 32px;
	text-align: center;
	font-size: 16px;
	line-height: 32px;
	color: var(--tg-white);
	background: var(--tg-primary-color);
	cursor: pointer;
	border-radius: 2px;
	-webkit-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
	z-index: 5;
}
.mobile-menu .navigation li.menu-item-has-children .dropdown-btn i {
	-webkit-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
.mobile-menu .navigation li.menu-item-has-children .dropdown-btn.open i {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	color: var(--tg-primary-color);
}
.mobile-menu .navigation li > ul,
.mobile-menu .navigation li > ul > li > ul {
	display: none;
}
.mobile-menu .social-links ul {
    display: flex;
    position: relative;
    text-align: center;
    padding: 30px 20px 20px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.mobile-menu .social-links li {
    position: relative;
    display: inline-block;
    margin: 0px 6px 10px;
}
.mobile-menu .social-links li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	position: relative;
	line-height: 32px;
	font-size: 16px;
	color: var(--tg-heading-font-color);
	-webkit-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
	border: 1px solid var(--tg-gray);
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
}
.mobile-menu .social-links li a:hover {
	border-color: var(--tg-primary-color);
	background: var(--tg-primary-color);
	color: var(--tg-white);
}
.menu-area .mobile-nav-toggler {
    position: relative;
    float: right;
    font-size: 27px;
    cursor: pointer;
    line-height: 1;
    color: #34336c;
    display: none;
    margin-top: 0;
    padding: 5px 10px;
    border: 2px solid #34336c;
}


/*=============================
	04. Search
===============================*/
.search-popup-wrap {
	position: fixed;
	top: 0;
	left: 0;
	background: var(--tg-white);
	height: auto;
	width: 100%;
	z-index: 99;
	padding: 40px 0 50px;
	display: none;
	z-index: 999;
}
.search-form {
	position: relative;
}
.search-form input {
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--tg-primary-color);
	padding: 10px 50px 20px;
	text-align: center;
	font-weight: 500;
	font-size: 30px;
	background: transparent;
    color: var(--tg-heading-font-color);
}
.search-form input::placeholder {
	font-size: 30px;
    color: #222;
	opacity: .5;
}
.search-btn {
	position: absolute;
	right: 20px;
	background: transparent;
	border: 0;
	font-size: 25px;
	color: var(--tg-primary-color);
	top: 50%;
	transform: translateY(-50%);
}
.search-close {
	position: absolute;
	top: 5%;
	right: 5%;
	font-size: 30px;
	color: var(--tg-primary-color);
	cursor: pointer;
}
body.search-visible {
	overflow: hidden;
}
.search-backdrop {
	background: #000;
	cursor: url(../img/images/cross-out.png), pointer;
	z-index: 99;
	visibility: hidden;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    transition: all .3s linear;
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
    opacity: 0;
    visibility: hidden;
}
.search-visible .search-backdrop {
    opacity: .55;
	visibility: visible;
}


/*=============================
	05. OffCanvas
===============================*/
.extra-info {
	background: var(--tg-white) none repeat scroll 0 0;
	height: 100%;
	padding: 30px;
	position: fixed;
	right: 0;
	top: 0;
	transition: all 0.7s ease 0s;
	width: 340px;
	z-index: 999;
	overflow-y: scroll;
	transform: translateX(100%);
}
.extra-info.active {
	transform: translateX(0);
}
.close-icon {
	margin-top: -16px;
	text-align: right;
}
.close-icon > button {
    background: transparent;
    border: 0 none;
    color: var(--tg-primary-color);
    cursor: pointer;
    font-size: 20px;
    padding: 0;
}
.extra-info .logo-side img {
    max-height: 45px;
}
.side-info {
	border-top: 1px solid var(--tg-primary-color);
	padding-top: 25px;
}
.contact-list h4 {
	color: var(--tg-heading-font-color);
	font-weight: 700;
	font-size: 18px;
}
.contact-list p {
    color: var(--tg-paragraph-color);
    margin: 0;
    margin-bottom: 2px;
    line-height: 26px;
}
.side-instagram {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    margin: -5px;
}
.side-instagram li {
    width: 33.3333%;
    flex: 0 0 33.3333%;
    padding: 5px;
}
.side-instagram li > a {
	display: block;
}
.side-instagram img {
	width: 100%;
	border-radius: 5px;
}
.social-icon-right > a {
	color: var(--tg-primary-color);
	display: inline-block;
	margin-right: 20px;
	text-align: center;
}
.social-icon-right > a:hover {
    color: var(--tg-secondary-color);
}
.offcanvas-overly {
	position: fixed;
	background: var(--tg-secondary-color);
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 99;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
}
.offcanvas-overly.active {
	opacity: .5;
	visibility: visible;
}
.extra-info::-webkit-scrollbar {
    width: 0px;
}


/*=============================
	06. Slider
===============================*/
.slider-bg {
    background-size: cover;
    background-position: center;
    padding: 400px 0 120px;
    min-height: 975px;
    position: relative;
    z-index: 1;
}
.slider-bg::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.40);
    z-index: -1;
}
.slider-content {
    overflow: hidden;
}
.slider-content .sub-title {
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 2px;
    display: block;
    line-height: 1.4;
    color: var(--tg-white);
    font-family: var(--tg-heading-font-family);
    margin-bottom: 15px;
}
.slider-content .title {
    font-size: 70px;
    color: var(--tg-white);
    margin-bottom: 45px;
    line-height: 1.1;
}
.slider-btn {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.slider-shape .shape-one {
    width: 184px;
    height: 184px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.33);
    position: absolute;
    right: 24%;
    bottom: 40%;
    z-index: -1;
}
.slider-shape .shape-two {
    width: 433px;
    height: 433px;
    border-radius: 50%;
    background: rgba(255, 82, 3, 0.60);
    position: absolute;
    right: 65px;
    bottom: 25px;
    z-index: -1;
}
.slider-active .slick-dots {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
    gap: 20px;
}
.slider-active .slick-dots li {
    list-style: none;
    line-height: 0;
}
.slider-active .slick-dots li button {
    text-indent: -99999999999px;
    border: none;
    background: rgba(255, 255, 255, 0.40);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    line-height: 1;
}
.slider-active .slick-dots li.slick-active button {
    background: var(--tg-primary-color);
    width: 30px;
    border-radius: 10px;
}

/* slider-two */
.slider-area-two {
    position: relative;
}
.slider-bg-two {
    background-size: cover;
    background-position: center;
    min-height: 960px;
    display: flex !important;
    align-items: center;
    position: relative;
    z-index: 1;
    padding: 220px 0 120px;
}
.slider-bg-two::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25);
    z-index: -1;
}
.slider-content-two {
    text-align: center;
}
.slider-content-two .sub-title {
    display: block;
    font-size: 30px;
    /*font-family: var(--tg-heading-font-family);*/
	font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
    
    text-transform: uppercase;
    line-height: 1;
    font-weight:600;
    color: #fff;
    margin-bottom: 20px;
}
.slider-content-two .title {
    font-size: 150px;
    margin-bottom: 50px;
    line-height: 1;
    color: var(--tg-white);
}
.slider-content-two .slider-btn {
    justify-content: center;
}
.slider-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    bottom: -40px;
    right: 19%;
}
.slider-nav .slick-arrow {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.10);
    border-radius: 5px;
    background: var(--tg-white);
    font-size: 30px;
    color: var(--tg-secondary-color);
    padding: 0;
}
.slider-nav .slick-arrow:hover {
    color: var(--tg-white);
    background: var(--tg-primary-color);
}

/* slider-three */
.slider-bg-three {
    background-size: cover;
    background-position: center;
    min-height: 960px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    padding: 200px 0 200px;
}
.slider-bg-three::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.50);
    z-index: -1;
}
.slider-content-three {
    overflow: hidden;
}
.slider-content-three .title {
    margin-bottom: 10px;
    color: var(--tg-white);
    font-size: 140px;
    line-height: 1.14;
}
.slider-content-three p {
    margin-bottom: 50px;
    color: var(--tg-white);
    font-size: 20px;
    width: 90%;
}
.slider-active-three .slick-dots {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: absolute;
    right: 100px;
    top: 50%;
    transform: translateY(-50%);
    gap: 10px;
}
.slider-active-three .slick-dots li {
    list-style: none;
    line-height: 0;
}
.slider-active-three .slick-dots li button {
    text-indent: -9999999999px;
    border: none;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.15);
    width: 23px;
    height: 6px;
}
.slider-active-three .slick-dots li.slick-active button {
    width: 45px;
    background: var(--tg-white);
}


/*=============================
	07. Banner
===============================*/
.banner-bg {
    background-size: cover;
    background-position: center;
    min-height: 960px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    padding: 240px 0 240px;
}
.banner-bg::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.50);
    z-index: -1;
}
.banner-content {
    text-align: center;
    margin-top: -40px;
}
.banner-content .title {
    margin-bottom: 35px;
    color: var(--tg-white);
    font-size: 70px;
    text-transform: uppercase;
    line-height: 1.2;
}
.banner-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/*=============================
	08. Breadcrumb
===============================*/
.breadcrumb-bg {
    background-size: cover;
    background-position: center;
    padding: 355px 0 95px;
    position: relative;
    z-index: 1;
}
.breadcrumb-bg::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(0, 0, 0, 0.30);*/
    z-index: -1;
}
.breadcrumb-content .title {
    font-size: 40px;
    margin-bottom: 20px;
    font-weight: 600;
    color: var(--tg-white);
}
.breadcrumb-content .breadcrumb {
    margin-bottom: 0;
}
.breadcrumb-content .breadcrumb-item {
    line-height: 1.2;
    color: #D9D9D9;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
}
.breadcrumb-content .breadcrumb-item a {
    color: var(--tg-white);
    font-size: 18px;
    font-weight: 700;
}
.breadcrumb-content .breadcrumb-item a i {
    margin-right: 10px;
}
.breadcrumb-content .breadcrumb-item a:hover {
    color: var(--tg-primary-color);
}
.breadcrumb-content .breadcrumb-item+.breadcrumb-item::before {
    float: left;
    padding-right: 10px;
    color: var(--tg-white);
    content: '\f105';
    font-family: "Font Awesome 5 Free";
    font-size: 16px;
    font-weight: 700;
}
.breadcrumb-content .breadcrumb-item+.breadcrumb-item {
    padding-left: 10px;
}

/*=============================
	09. About
===============================*/
.section-title .sub-title {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: var(--tg-heading-font-family);
    color: #34336c;
    gap: 15px;
    margin-bottom: 30px;
}
.section-title .sub-title strong {
    transform: translateY(-2px);
}
.section-title .sub-title strong svg path {
    color: var(--tg-primary-color);
}
.section-title .title {
    margin-bottom: 0;
    font-size: 28px;
    font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
}
.word {
    display:inline-flex;
    opacity:0;
    transition:opacity 1.1s cubic-bezier(.65,.05,.36,1);
    transition-delay:calc(70ms * var(--word-index) + 0ms);
}
.innerAnimated .word {
    opacity:1;
}
.char {
    display:inline-flex;
    opacity:0;
    transform:rotateX(90deg);
    transform-origin:bottom;
    transition:opacity 1.1s cubic-bezier(.65,.05,.36,1),transform 1.1s cubic-bezier(.65,.05,.36,1);
    transition-delay:calc(30ms * var(--char-index) + 10ms);
}
.innerAnimated .char {
    transform:rotateX(0deg);
    opacity:1;
}
[data-animation^=innerAnimated] {
    visibility: hidden;
}
.innerAnimated {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    visibility: visible;
}
.about-img-wrap {
    position: relative;
    padding-right: 100px;
    padding-bottom: 160px;
}
.about-img-wrap img {
    border-radius: 10px;
}
.about-img-wrap img:nth-child(2) {
    position: absolute;
    right: 30px;
    bottom: 0;
}
.about-img-wrap .play-btn {
    position: absolute;
    width: 80px;
    height: 80px;
    background: var(--tg-primary-color);
    color: var(--tg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    line-height: 0;
    margin: 10px;
    left: 15px;
    bottom: 30px;
    z-index: 1;
}
.about-img-wrap .play-btn::before {
    content: "";
    position: absolute;
    left: -10px;
    top: -10px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px dashed var(--tg-secondary-color);
    background: transparent;
    z-index: -1;
    animation: btnRotate 15s linear infinite;
}
.about-content > p {
    margin-bottom: 10px;
}
.about-list .list-wrap {
    margin-bottom: 50px;
}
.about-list .list-wrap li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 40px;
}
.about-list .list-wrap li:last-child {
    margin-bottom: 0;
}
.about-list .list-wrap li .icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px dashed var(--tg-primary-color);
    flex: 0 0 auto;
    font-size: 25px;
    color: var(--tg-primary-color);
    margin-right: 10px;
    line-height: 0;
}
.about-list .list-wrap li .content .title {
    font-size: 20px;
    margin-bottom: 8px;
}
.about-list .list-wrap li .content p {
    margin-bottom: 0;
}
.about-content-bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}
.about-content-bottom .call-btn {
    display: flex;
    align-items: center;
    font-size: 24px;
    color: var(--tg-secondary-color);
    font-weight: 700;
    font-family: var(--tg-heading-font-family);
}
.about-content-bottom .call-btn i {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tg-secondary-color);
    color: var(--tg-white);
    font-size: 15px;
    margin-right: 12px;
}
.about-content-bottom .call-btn:hover {
    color: var(--tg-primary-color);
}
.rotateme {
  -webkit-animation-name: btnRotate;
  animation-name: btnRotate;
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}
@keyframes btnRotate {
  from {
    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes btnRotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

/* about-two */
.about-area-inner .col-45 {
    width: 44.5%;
    flex: 0 0 auto;
}
.about-area-inner .col-55 {
    width: 55.5%;
    flex: 0 0 auto;
}
.about-img-wrap-two {
    display: flex;
    align-items: center;
    gap: 20px;
}
.about-img-wrap-two img:nth-child(1) {
    border-radius: 10px 0 0 10px;
}
.about-img-wrap-two img:nth-child(2) {
    border-radius: 0 10px 10px 0;
}
.about-content-two {
    margin-left: 20px;
}
.section-title.title-style-three .sub-title {
    /* font-size: 16px; */
    color: #838383;
    /* letter-spacing: 3.2px;*/
    margin-bottom: 20px;
}
.about-tab {
    width: 90%;
}
.about-tab .nav-tabs {
    border-bottom: none;
    gap: 20px;
    margin-bottom: 30px;
}
.about-tab .nav-tabs .nav-link {
    margin-bottom: 0;
    background: #FFF7F3;
    border: none;
    font-size: 18px;
    font-weight: 500;
    color: var(--tg-primary-color);
    font-family: var(--tg-heading-font-family);
    line-height: 1;
    padding: 16px 23px;
    border-radius: 5px;
}
.about-tab .nav-tabs .nav-link.active {
    background: var(--tg-primary-color);
    color: var(--tg-white);
}
.about-tab .tab-content p {
    margin-bottom: 30px;
}
.about-list-two .list-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 0;
}
.about-list-two .list-wrap li {
    display: flex;
    align-items: baseline;
    width: 50%;
    font-weight: 500;
    color: var(--tg-secondary-color);
    gap: 7px;
}

/*=============================
	10. Services
===============================*/
.services-area {
    position: relative;
    padding: 120px 0;
    z-index: 1;
    overflow: hidden;
    margin-bottom: 120px;
}
.services-area::before {
    content: "";
    width: 79%;
    height: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    /*background: var(--tg-section-background);*/
	background:#fff;
    z-index: -1;
}
.services-item {
    border-radius: 10px;
    background: var(--tg-white);
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.06);
    padding: 90px 20px 80px;
    text-align: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.services-item::before {
     content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background: #34336c;
    z-index: -1;
    transition: .3s ease-in-out;
    opacity: 0;
}
.services-item:hover::before {
    height: 100%;
    opacity: 1;
}
.services-icon {
    font-size: 90px;
    line-height: 0;
    color: #34336c;
    margin-bottom: 40px;
    transition: .3s ease-in-out;
}
.services-content .title {
    font-size: 30px;
    margin-bottom: 25px;
}
.services-content .link-btn {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-decoration-line: underline;
    text-transform: uppercase;
    line-height: normal;
    display: inline-block;
    color: #848484;
}
.services-content .number {
    width: 50px;
    height: 50px;
    border: 1px solid #ABABAB;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
    font-size: 20px;
    font-weight: 700;
    font-family: var(--tg-heading-font-family);
    -webkit-text-stroke: 1px #ABABAB;
    color: transparent;
    position: absolute;
    top: 40px;
    right: 40px;
    transition: .3s ease-in-out;
}
.services-item:hover .services-content .link-btn,
.services-item:hover .services-content .title,
.services-item:hover .services-icon {
    color: var(--tg-white);
}
.services-item:hover .services-content .title a:hover {
    color: var(--tg-white);
}
.services-item:hover .services-content .number {
    border-color: var(--tg-white);
    -webkit-text-stroke: 1px var(--tg-white);
}
.services-scrollbar {
    margin-top: 60px;
}
.services-scrollbar .swiper-scrollbar {
    display: block;
    width: 100%;
    height: 2px;
    position: relative;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    background: transparent;
    margin: 11px 0;
}
.services-scrollbar .swiper-scrollbar::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #C9C9C9;
    pointer-events: none;
}
.services-scrollbar .swiper-scrollbar .swiper-scrollbar-drag {
    height: 24px;
    background: #34336c;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s;
    top: -11px;
    z-index: 1;
}

/* services-two */
.services-area-two {
    position: relative;
    padding: 140px 0 100px;
}
.services-shape {
    position: absolute;
    left: 0;
    bottom: 9%;
    z-index: -1;
}
.section-title.title-style-two .sub-title {
    /* font-size: 16px; */
    gap: 10px;
    margin-bottom: 22px;
}
.section-title.title-style-two.text-center .sub-title::before {
    content: "";
    width: 37px;
    height: 2px;
    background: #34336c;
}
.section-title.title-style-two .sub-title::after {
    content: "";
    width: 37px;
    height: 2px;
    background: #34336c;
}
.services-item-two {
    margin-bottom: 40px;
}
.services-thumb-two {
    position: relative;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}
.services-thumb-two img {
    width: 370px;
    height: 300px;
    object-fit: cover;
    transform: scale(1);
    transition: all .8s cubic-bezier(.25, .46, .45, .94);
}
.services-item-two:hover .services-thumb-two img {
    transform: scale(1.1);
}
.services-icon-two {
    position: absolute;
    right: 30px;
    bottom: 30px;
    width: 78px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tg-white);
    border-radius: 10px;
    font-size: 45px;
    line-height: 0;
    color: var(--tg-primary-color);
    transition: .3s ease-in-out;
}
.services-item-two:hover .services-icon-two {
    background: var(--tg-primary-color);
    color: var(--tg-white);
}
.services-content-two {
    background: var(--tg-white);
    border-radius: 0px 0px 10px 10px;
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.06);
    padding: 20px 30px;
    transition: .3s ease-in-out;
}
.services-content-two .title {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 8px;
}
.services-content-two .title a:hover {
    color: var(--tg-white);
}
.services-content-two .link-btn {
    display: inline-block;
    color: #848484;
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.services-content-two .link-btn:hover {
    color: var(--tg-secondary-color);
}
.services-item-two:hover .services-content-two {
    background: var(--tg-primary-color);
}
.services-item-two:hover .services-content-two .link-btn,
.services-item-two:hover .services-content-two .title {
    color: var(--tg-white);
}

/* services-three */
.services-area-three {
    margin-top: -188px;
    padding: 0 0 90px;
}
.services-item-three {
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.10);
    text-align: center;
    background: var(--tg-white);
    padding: 45px 40px;
    border-radius: 10px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-bottom: 30px;
}
.services-item-three::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background: #34336c;
    z-index: -1;
    transition: .3s ease-in-out;
    opacity: 0;
}
.services-item-three.active::before,
.services-item-three:hover::before {
    opacity: 1;
    height: 100%;
}
.services-icon-three {
    line-height: 0;
    font-size: 75px;
    color: #34336c;
    margin-bottom: 20px;
    transition: .3s ease-in-out;
}
.services-content-three .title {
    font-size: 30px;
    margin-bottom: 40px;
    line-height: 1.3;
}
.services-content-three .title a:hover {
    color: var(--tg-white);
}
.services-content-three .link-arrow {
    font-size: 30px;
    line-height: 1;
    -webkit-text-stroke: 1px var(--tg-secondary-color);
    color: transparent;
}
.services-item-three.active .services-content-three .link-arrow,
.services-item-three:hover .services-content-three .link-arrow,
.services-item-three.active .services-content-three .title,
.services-item-three:hover .services-content-three .title,
.services-item-three.active .services-icon-three,
.services-item-three:hover .services-icon-three {
    color: var(--tg-white);
}
.services-item-three.active .services-content-three .link-arrow,
.services-item-three:hover .services-content-three .link-arrow {
    -webkit-text-stroke: 1px transparent;
}

/* services-four */
.services-area-four {
    background: var(--tg-section-background);
    padding: 120px 0 90px;
}
.services-item-four {
    border-radius: 20px;
    background: var(--tg-white);
    padding: 35px 30px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.services-item-four::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    background: var(--tg-primary-color);
    z-index: -1;
    transition: .3s ease-in-out;
    opacity: 0;
}
.services-item-four.active::before,
.services-item-four:hover::before {
    opacity: 1;
    height: 100%;
}
.services-content-four .services-content-top {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}
.services-icon-four {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tg-primary-color);
    border-radius: 50%;
    line-height: 0;
    font-size: 22px;
    color: var(--tg-primary-color);
    flex: 0 0 auto;
    margin-right: 15px;
    transition: .3s ease-in-out;
}
.services-item-four.active .services-icon-four,
.services-item-four:hover .services-icon-four {
    border-color: var(--tg-white);
    color: var(--tg-white);
}
.services-content-four .title {
    margin-bottom: 0;
    font-size: 24px;
    font-weight: 600;
}
.services-content-four .title a:hover {
    color: var(--tg-white);
}
.services-content-four p {
    margin-bottom: 25px;
    transition: .3s ease-in-out;
}
.services-content-four .link-btn {
    color: #848484;
    font-family: var(--tg-heading-font-family);
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.services-content-four .link-btn:hover {
    text-decoration: underline;
}
.services-item-four.active .services-content-four .link-btn,
.services-item-four.active .services-content-four p,
.services-item-four.active .services-content-four .title,
.services-item-four:hover .services-content-four .link-btn,
.services-item-four:hover .services-content-four p,
.services-item-four:hover .services-content-four .title {
    color: var(--tg-white);
}

/* services-five */
.section-title.title-style-four .sub-title {
    display: block;
    align-items: center;
    line-height: 1;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: var(--tg-heading-font-family);
    color: var(--tg-primary-color);
    margin-bottom: 15px;
}
.services-item-five {
    margin-bottom: 30px;
}
.services-thumb-five {
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}
.services-thumb-five img {
    transform: scale(1);
    transition: all .8s cubic-bezier(.25, .46, .45, .94);
    width: 370px;
    height: 270px;
    object-fit: cover;
}
.services-item-five:hover .services-thumb-five img {
    transform: scale(1.1);
}
.services-content-five {
    border-radius: 0px 0px 10px 10px;
    background: var(--tg-white);
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    display: flex;
}
.services-content-five .icon {
    width: 100px;
    height: auto;
    min-height: 90px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tg-primary-color);
    color: var(--tg-white);
    line-height: 0;
    font-size: 45px;
}
.services-content-five .content {
    padding: 14px 15px;
}
.services-content-five .title {
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 5px;
    font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
}
.services-content-five .link-btn {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #848484;
    line-height: 1;
}
.services-content-five .link-btn:hover {
    color: var(--tg-primary-color);
}

/* services-details */
.services-sidebar {
    position: sticky;
    top: 110px;
}
.services-widget {
    margin-bottom: 40px;
}
.services-widget:last-child {
    margin-bottom: 0;
}
.services-cat-list .list-wrap {
    border-radius: 10px;
    overflow: hidden;
}
.services-cat-list .list-wrap li {
    margin-bottom: 2px;
}
.services-cat-list .list-wrap li:last-child {
    margin-bottom: 0;
}
.services-cat-list .list-wrap li a {
    font-size: 20px;
    font-weight: 600;
    color: var(--tg-secondary-color);
    background: #FBF6F3;
    display: block;
    line-height: 1.2;
    padding: 18px 40px;
}
.services-cat-list .list-wrap li.active a,
.services-cat-list .list-wrap li a:hover {
    color: var(--tg-white);
    background: var(--tg-primary-color);
}
.services-sidebar .services-contact {
    background-size: cover;
    background-position: center;
    text-align: center;
    padding: 100px 30px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.services-sidebar .services-contact::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: -1;
}
.services-sidebar .services-contact span {
    display: block;
    color: var(--tg-white);
    line-height: 1;
    margin-bottom: 10px;
}
.services-sidebar .services-contact .title {
    margin-bottom: 25px;
    color: var(--tg-white);
    font-size: 30px;
}
.services-details-wrap {
    margin-left: 10px;
}
.services-details-img {
    margin-bottom: 30px;
}
.services-details-img img {
    border-radius: 10px;
}
.services-details-content .title {
    margin-bottom: 15px;
    font-size: 40px;
}
.services-details-content p {
    margin-bottom: 30px;
}
.services-details-content .bold-info {
    font-style: italic;
    font-weight: 500;
    color: var(--tg-secondary-color);
}
.service-quality-wrap .title-two {
    margin-bottom: 0;
    font-size: 24px;
    border-bottom: 1px solid #D9D9D9;
    padding-bottom: 25px;
    margin-bottom: 20px;
}
.service-quality-wrap .sq-item {
    margin-bottom: 30px;
    margin-top: 10px;
}
.service-quality-wrap .sq-item .thumb img {
    border-radius: 10px 10px 0 0;
}
.service-quality-wrap .sq-item .content {
    border-radius: 0px 0px 10px 10px;
    background: var(--tg-white);
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.10);
    padding: 30px 30px 25px;
}
.service-quality-wrap .sq-item .content .title {
    font-size: 23px;
    margin-bottom: 10px;
}
.service-quality-wrap .sq-item .content p {
    margin-bottom: 0;
}
.services-faq-wrap .faq-wrap-two {
    padding: 60px 70px 40px;
    margin-left: 0;
    margin-top: 50px;
}

/*=============================
	11. Work
===============================*/
.work-item {
    text-align: center;
    border-radius: 10px;
    background: var(--tg-white);
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.05);
    padding: 75px 20px 40px;
    position: relative;
    margin-top: 40px;
    transition: .3s linear;
    margin-bottom: 30px;
}
.work-item-wrap .row [class*="col-"]:nth-child(odd) .work-item {
    padding: 40px 20px 75px;
    margin-top: 0;
    margin-bottom: 70px;
}
.work-item.active,
.work-item:hover {
    /*background: var(--tg-primary-color);*/
	background:#34336c;
}
.work-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    border: 1px solid #34336c;
    border-radius: 50%;
    margin: 0 auto;
    color: #34336c;
    font-size: 30px;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--tg-white);
    transition: .3s linear;
}
.work-item-wrap .row [class*="col-"]:nth-child(odd) .work-item .work-icon {
    top: auto;
    bottom: -40px;
}
.work-item.active .work-icon,
.work-item:hover .work-icon {
    border-color: var(--tg-white);
    background: #34336c;
   color: var(--tg-white);
}
.work-content span {
    color: #838383;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1.5px;
    display: block;
    line-height: 1;
    margin-bottom: 12px;
    transition: .3s linear;
}
.work-content .title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    transition: .3s linear;
    text-transform: uppercase;
}
.work-content p {
    margin-bottom: 0;
    transition: .3s linear;
}
.work-item.active .work-content p,
.work-item.active .work-content .title,
.work-item.active .work-content span,
.work-item:hover .work-content p,
.work-item:hover .work-content .title,
.work-item:hover .work-content span {
    color: var(--tg-white);
}

/*=============================
	12. Consultation
===============================*/
.consultation-area {
    background: var(--tg-section-background);
    padding: 120px 0;
    position: relative;
}
.consultation-form .form-grp {
    margin-bottom: 30px;
}
.consultation-form .form-grp textarea,
.consultation-form .form-grp input {
    width: 100%;
    border: none;
    background: transparent;
    border-bottom: 1px solid #D6D6D6;
    padding: 0 0 5px;
    font-size: 15px;
    color: var(--tg-secondary-color);
    line-height: 1;
    display: block;
}
.consultation-form .form-grp textarea::placeholder,
.consultation-form .form-grp input::placeholder {
    font-size: 15px;
    color: #808080;
    line-height: 1;
}
.consultation-form .form-grp textarea {
    min-height: 110px;
    max-height: 110px;
}
.consultation-content {
    margin-right: 50px;
}
.consultation-img {
    background-size: cover;
    background-position: center;
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

/* consultation-two */
.consultation-area-two {
    background: var(--tg-section-background);
    padding: 120px 0;
    position: relative;
}
.consultation-content.consultation-content-two {
    margin-left: 70px;
}
.consultation-img-two {
    background-size: cover;
    background-position: center;
    width: 50%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.consultation-img-two .play-btn {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tg-primary-color);
    color: var(--tg-white);
    border-radius: 50%;
    font-size: 30px;
    line-height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


/*=============================
	13. Project
===============================*/
.project-area {
    position: relative;
    z-index: 1;
    padding: 120px 0 0;
}
.project-area::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60%;
    background: #0F171B;
    z-index: -1;
}
.section-title.white-title .title {
    color: var(--tg-white);
}
.project-item-wrap .row {
    --bs-gutter-x: 45px;
}
.project-item-wrap .row [class*="col-"] {
    padding: 0 22.5px;
}
.project-item {
    position: relative;
    overflow: hidden;
}
.project-thumb img {
    border-radius: 5px;
    width: 418px;
    height: 478px;
    object-fit: cover;
}
.project-content {
    position: absolute;
    left: 40px;
    right: 0;
    bottom: 35px;
    background: var(--tg-white);
    border-radius: 5px 0px 0px 5px;
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.15);
    padding: 40px 40px;
    transition: .3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    transform: translateX(200px);
}
.project-item.active .project-content,
.project-item:hover .project-content {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}
.project-content span {
    display: block;
    line-height: 1;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--tg-primary-color);
    font-family: var(--tg-heading-font-family);
    margin-bottom: 10px;
}
.project-content .title {
    margin-bottom: 0;
    font-size: 19px;
}

/* project-two */
.project-item-two {
    margin-bottom: 40px;
}
.project-thumb-two {
    padding-right: 30px;
}
.project-thumb-two img {
    border-radius: 10px;
}
.project-content-two {
    border-radius: 10px;
    background: var(--tg-white);
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.15);
    padding: 31px 13px 31px 20px;
    margin-left: 40px;
    margin-top: -80px;
    position: relative;
    z-index: 1;
    transition: .3s ease-in-out;
}
.project-item-two:hover .project-content-two {
    background: var(--tg-primary-color);
}
.project-content-two span {
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--tg-primary-color);
    font-family: var(--tg-heading-font-family);
    display: block;
    line-height: 1;
    margin-bottom: 8px;
    transition: .3s ease-in-out;
}
.project-content-two .title {
    font-size: 18px;
    margin-bottom: 0;
    font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
    text-transform: uppercase;
}
.project-content-two .title a:hover {
    color: var(--tg-white);
}
.project-item-two:hover .project-content-two .title,
.project-item-two:hover .project-content-two span {
    color: var(--tg-white);
}
.project-active-two [class*="col-"] {
    padding: 0 15px;
}
.project-active-two .slick-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    gap: 10px;
    margin-top: 20px;
}
.project-active-two .slick-dots li {
    list-style: none;
    line-height: 0;
}
.project-active-two .slick-dots li button {
    text-indent: -9999999999px;
    border: none;
    background: #ECECEC;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    line-height: 1;
}
.project-active-two .slick-dots li.slick-active button {
    background: var(--tg-primary-color);
}

/* project-three */
.project-item-three {
    position: relative;
    overflow: hidden;
}
.project-thumb-three {
    overflow: hidden;
    border-radius: 10px;
}
.project-thumb-three img {
    width: 100%;
    height: 660px;
    object-fit: cover;
    transition: all .8s cubic-bezier(.25, .46, .45, .94);
    transform: scale(1);
}
.project-item-three:hover .project-thumb-three img {
    transform: scale(1.1);
}
.project-content-three {
    background: var(--tg-white);
    border-radius: 20px;
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.15);
    padding: 40px 40px;
    width: 400px;
    position: absolute;
    left: 40px;
    bottom: 45px;
    transition: all .4s cubic-bezier(.25, .46, .45, .94);
    transform: translateX(-150px);
    opacity: 0;
    visibility: hidden;
}
.slick-current.slick-active .project-item-three .project-content-three,
.project-item-three:hover .project-content-three {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}
.project-content-three span {
    display: block;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--tg-primary-color);
    font-family: var(--tg-heading-font-family);
    font-weight: 600;
    line-height: 1;
    margin-bottom: 10px;
}
.project-content-three .title {
    margin-bottom: 0;
    font-size: 24px;
}
.project-active-three {
    --bs-gutter-x: 50px;
}
.project-active-three [class*="col-"] {
    padding: 0 25px;
}
.project-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    margin-bottom: 50px;
}
.project-nav .slick-arrow {
    border: none;
    border-radius: 5px;
    background: var(--tg-white);
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.10);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 0;
    -webkit-text-stroke: 1px var(--tg-secondary-color);
    color: transparent;
}
.project-nav .slick-arrow:hover {
    color: var(--tg-white);
    background: var(--tg-primary-color);
    -webkit-text-stroke: transparent;
}

/* project-four */
.project-item-four {
    position: relative;
    margin-bottom: 30px;
}
.project-thumb-four {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}
.project-thumb-four::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 35%;
    border-radius: 20px;
    background: #000;
    filter: blur(100px);
    pointer-events: none;
}
.project-content-four {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 20px 60px 60px 60px;
}
.project-content-four span {
    display: block;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--tg-heading-font-family);
    line-height: 1;
    text-transform: uppercase;
    color: var(--tg-white);
    margin-bottom: 10px;
}
.project-content-four .title {
    margin-bottom: 0;
    color: var(--tg-white);
    font-size: 30px;
}

/* inner-project */
.inner-project-item-wrap .row {
    --bs-gutter-x: 50px;
}
.inner-project-item-wrap .project-item-three {
    margin-bottom: 50px;
}
.btn.btn-three {
    background: #FFF6F1;
    color: var(--tg-primary-color);
}
.btn.btn-three:hover {
    color: var(--tg-white);
}
.btn.btn-three::before {
    background: var(--tg-primary-color);
}

/* project-details */
.project-details-img {
    margin-bottom: 50px;
}
.project-details-img img {
    border-radius: 10px;
}
.project-details-content .pd-inner-content .title {
    font-size: 40px;
    margin-bottom: 22px;
}
.project-details-content p {
    margin-bottom: 30px;
}
.project-details-content .pd-inner-content p {
    margin-bottom: 30px;
}
.project-details-content .title-two {
    font-size: 30px;
    margin-bottom: 12px;
}
.project-details-info {
    border-radius: 10px;
    background: var(--tg-white);
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.10);
    padding: 50px 25px;
    position: sticky;
    top: 100px;
}
.project-details-info .info-list .list-wrap li {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}
.project-details-info .info-list .list-wrap li:last-child {
    margin-bottom: 0;
}
.project-details-info .info-list .icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--tg-primary-color);
    color: var(--tg-primary-color);
    margin-right: 20px;
    flex: 0 0 auto;
}
.project-details-info .info-list .content span {
    display: block;
    font-size: 18px;
    line-height: 1;
    margin-bottom: 10px;
}
.project-details-info .info-list .content .title {
    font-size: 24px;
    margin-bottom: 0;
    font-weight: 600;
}
.project-details-social {
    display: flex;
    align-items: center;
    gap: 15px;
    border-top: 1px solid var(--tg-secondary-color);
    padding-top: 30px;
    margin-top: 40px;
}
.project-details-social .title {
    margin-bottom: 0;
    font-size: 15px;
}
.project-details-social .list-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
}
.project-details-social .list-wrap li a {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tg-secondary-color);
    color: var(--tg-white);
    font-size: 15px;
}
.project-details-social .list-wrap li a:hover {
    background: var(--tg-primary-color);
}
.pd-list-item {
    border-radius: 10px;
    border: 1px solid #C3C3C3;
    padding: 40px 32px 35px;
    margin-bottom: 30px;
}
.pd-list-item .icon {
    font-size: 55px;
    line-height: 0;
    color: var(--tg-primary-color);
    margin-bottom: 15px;
}
.pd-list-item .content .title {
    margin-bottom: 10px;
    font-size: 24px;
}
.pd-list-item .content p {
    margin-bottom: 0;
}
.project-details-list-wrap {
    margin: 20px 0 0;
}
.prev-next-post-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.prev-next-post-wrap .btn {
    text-transform: capitalize;
    gap: 5px;
}
.project-active-five [class*="col-"] {
    padding: 0 15px;
}


/*=============================
	14. Choose
===============================*/
.choose-img-wrap {
    position: relative;
    padding-right: 47px;
    padding-bottom: 25px;
}
.choose-img-wrap img {
    border-radius: 20px;
}
.choose-img-wrap .year-experience {
    margin-bottom: 0;
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: var(--tg-secondary-color);
    border-radius: 50%;
    border: 15px solid var(--tg-white);
    font-size: 60px;
    color: var(--tg-primary-color);
    line-height: 1;
    position: absolute;
    right: 0;
    bottom: 0;
}
.choose-img-wrap .year-experience span {
    display: block;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
    color: var(--tg-white);
    margin-top: 15px;
}
.choose-content p {
    margin-bottom: 30px;
}
.progress-item .title {
    margin-bottom: 12px;
    font-size: 22px;
    font-weight: 600;
    font-family: var(--tg-heading-font-family);
}
.progress-wrap {
    overflow: hidden;
}
.progress-item {
    margin-bottom: 50px;
}
.progress-item:last-child {
    margin-bottom: 0;
}
.progress-item .progress {
    height: 10px;
    background-color: #FFEAE0;
    border-radius: 10px;
    overflow: inherit;
}
.progress-item .progress-bar {
    background-color: var(--tg-primary-color);
    position: relative;
    overflow: inherit;
    border-radius: 10px;
}
.progress-item .progress-bar span {
    display: block;
    position: absolute;
    right: -13px;
    bottom: 22px;
    color: var(--tg-primary-color);
    line-height: 1;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
}


/*=============================
	15. Faq
===============================*/
.faq-area {
    background: var(--tg-section-background);
    padding: 120px 0 90px;
}
.faq-content p {
    margin-bottom: 35px;
}
.faq-wrap .accordion-item {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--tg-gray);
    margin-bottom: 30px;
}
.faq-wrap .accordion-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.faq-wrap .accordion-button {
    padding: 0 50px 20px 0;
    font-size: 17px;
    color: var(--tg-secondary-color);
    font-weight: 600;
    font-family: var(--tg-heading-font-family);
    background-color: transparent;
    line-height: 1.6;
    position: relative;
	text-transform: uppercase;
}
.faq-wrap .accordion-button::after {
    content: "\f063";
    width: 25px;
    height: 25px;
    background-image: none;
    font-family: "Font Awesome 5 Free";
    font-size: 12px;
    position: absolute;
    right: 0;
    top: 13px;
    color: var(--tg-secondary-color);
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.20);
    border-radius: 2px;
    background: var(--tg-white);
    display: flex;
    align-items: center;
    justify-content: center;
}
.faq-wrap .accordion-button:not(.collapsed)::after {
    background-image: none;
    transform: rotate(-180deg);
    background: var(--tg-primary-color);
    color: var(--tg-white);
}
.faq-wrap .accordion-button:not(.collapsed) {
    color: var(--tg-secondary-color);;
    background-color: transparent;
    box-shadow: none;
}
.faq-wrap .accordion-body {
    padding: 0 0 25px;
}
.faq-wrap .accordion-body p {
    margin-bottom: 0;
}
.faq-wrap .accordion-button:focus {
    border-color: none;
    box-shadow: none;
}
.faq-img {
    position: relative;
    z-index: 1;
}
.faq-img img {
    max-width: unset;
    margin-bottom: -30px;
}
.faq-shape {
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: rgba(255, 82, 3, 0.10);
    position: absolute;
    z-index: -1;
    right: -20%;
    top: -18%;
}

/* faq-two */
.faq-img-two img {
    border-radius: 20px;
    max-width: unset;
}
.faq-wrap-two {
    background: var(--tg-white);
    border-radius: 10px;
    padding: 60px 40px 40px;
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.10);
    margin-left: 70px;
    margin-top: 150px;
}
.faq-wrap.faq-wrap-two .accordion-button::after {
    content: "\f078";
    width: auto;
    height: auto;
    background-image: none;
    font-family: "Font Awesome 5 Free";
    font-size: 18px;
    position: absolute;
    right: 0;
    top: 2px;
    color: var(--tg-secondary-color);
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    line-height: 1;
}
.faq-wrap.faq-wrap-two .accordion-button:not(.collapsed)::after {
    color: var(--tg-primary-color);
}
.faq-wrap.faq-wrap-two .accordion-button:not(.collapsed) {
    color: var(--tg-primary-color);
}
.faq-wrap.faq-wrap-two .accordion-body {
    padding: 0 30px 25px 0;
}



/*=============================
	16. Team
===============================*/
.area-bg {
    position: relative;
    z-index: 1;
}
.area-bg-inner {
    background-size: cover;
    background-position: center;
    position: absolute;
    width: 100%;
    height: 68%;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-attachment: fixed;
}
.area-bg-inner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.70);
}
.team-item {
    margin-bottom: 40px;
}
.team-thumb {
    position: relative;
    overflow: hidden;
}
.team-thumb img {
    border-radius: 5px 5px 5px 0;
    transition: .3s ease-in-out;
    width: 370px;
    height: 450px;
    object-fit: cover;
}
.team-item.active .team-thumb img,
.team-item:hover .team-thumb img {
    filter: grayscale(1);
}
.team-social .list-wrap {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 30px;
    top: 30px;
    gap: 8px;
    transition: .3s ease-in-out;
    transform: translateX(50px);
    opacity: 0;
    visibility: hidden;
}
.team-item.active .team-social .list-wrap,
.team-item:hover .team-social .list-wrap {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}
.team-social .list-wrap li a {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tg-secondary-color);
    border-radius: 50%;
    color: var(--tg-white);
    font-size: 15px;
}
.team-social .list-wrap li a:hover {
    background: var(--tg-primary-color);
}
.team-content {
    background: var(--tg-white);
    border-radius: 0px 0px 5px 5px;
    display: inline-block;
    min-width: 240px;
    padding: 15px 20px;
    transition: .3s ease-in-out;
}
.team-item.active .team-content,
.team-item:hover .team-content {
    background: var(--tg-primary-color);
}
.team-content .title {
    margin-bottom: 5px;
    font-size: 24px;
}
.team-content .title a:hover {
    color: var(--tg-white);
}
.team-content span {
    display: block;
    color: #6D6E72;
    font-size: 15px;
    line-height: 1.2;
    transition: .3s ease-in-out;
}
.team-item.active .team-content span,
.team-item:hover .team-content span,
.team-item.active .team-content .title,
.team-item:hover .team-content .title {
    color: var(--tg-white);
}


/* team-two */
.team-item-two {
    margin-bottom: 30px;
}
.team-thumb-two {
    position: relative;
    overflow: hidden;
}
.team-thumb-two img {
    border-radius: 10px 10px 0 0;
    width: 100%;
    height: 450px;
    object-fit: cover;
}
.team-item-two.active .team-social .list-wrap,
.team-item-two:hover .team-social .list-wrap {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}
.team-content-two {
    background: var(--tg-section-background);
    border-radius: 0 0 10px 10px;
    text-align: center;
    padding: 24px 20px;
    transition: .3s ease-in-out;
}
.team-item-two.active .team-content-two,
.team-item-two:hover .team-content-two {
    background: var(--tg-white);
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.10);
    background: var(--tg-white);
}
.team-content-two .title {
    margin-bottom: 8px;
    font-size: 24px;
}
.team-content-two span {
    color: #6D6E72;
    display: block;
    font-size: 15px;
    line-height: 1;
}

/* team-details */
.team-details-wrap .row .col-36 {
    width: 35.9%;
    flex: 0 0 auto;
}
.team-details-wrap .row .col-64 {
    width: 64.1%;
    flex: 0 0 auto;
}
.team-details-img {
    position: sticky;
    top: 110px;
}
.team-details-img img {
    border-radius: 10px;
}
.team-details-info-wrap {
    margin-left: 35px;
}
.team-details-name {
    margin-bottom: 30px;
}
.team-details-name .title {
    margin-bottom: 10px;
    font-size: 25px;
}
.team-details-name span {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: #222222;
    line-height: 1;
}
.team-info-wrap .list-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 30px;
}
.team-info-wrap .list-wrap li {
    color: #6D6E72;
    line-height: 1.4;
}
.team-info-wrap .list-wrap li span {
    font-weight: 700;
    color: var(--tg-secondary-color);
}
.team-details-social .list-wrap {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;
}
.team-details-social .list-wrap li a {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tg-secondary-color);
    color: var(--tg-white);
    font-size: 15px;
}
.team-details-social .list-wrap li a:hover {
    background: var(--tg-primary-color);
}
.team-details-content {
    margin-bottom: 45px;
}
.team-details-content p {
    /* margin-bottom: 30px; */
}
.team-details-info-wrap .progress-wrap {
    margin-bottom: 70px;
}
.team-details-info-wrap .progress-item {
    margin-bottom: 30px;
}
.team-details-info-wrap .progress-item:last-child {
    margin-bottom: 0;
}
.team-details-form-wrap .title {
    margin-bottom: 30px;
    font-size: 30px;
}
.team-details-form-wrap .row {
    --bs-gutter-x: 20px;
}
.team-details-form-wrap .form-grp {
    margin-bottom: 20px;
}
.team-details-form-wrap .form-grp textarea,
.team-details-form-wrap .form-grp input {
    width: 100%;
    border: none;
    border-radius: 10px;
    background: #F8F8F8;
    font-size: 15px;
    line-height: 1;
    color: var(--tg-secondary-color);
    padding: 16px 22px;
    display: block;
    height: 50px;
}
.team-details-form-wrap .form-grp textarea::placeholder,
.team-details-form-wrap .form-grp input::placeholder {
    font-size: 15px;
    line-height: 1;
    color: #818181;
}
.team-details-form-wrap .form-grp textarea {
    min-height: 183px;
    max-height: 183px;
}
.related-team-item-wrap [class*="col-"] {
    padding: 0 15px;
}
.team-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 50px;
    gap: 20px;
}
.team-nav .slick-arrow {
    border: none;
    border-radius: 5px;
    background: var(--tg-white);
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.10);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 0;
    -webkit-text-stroke: 1px var(--tg-secondary-color);
    color: transparent;
}
.team-nav .slick-arrow:hover {
    color: var(--tg-white);
    background: var(--tg-primary-color);
    -webkit-text-stroke: transparent;
}

/*=============================
	17. Counter
===============================*/
.counter-item {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    justify-content: center;
}
.counter-icon {
    width: 60px;
    height: 60px;
    flex: 0 0 auto;
    margin-right: 15px;
}
.counter-icon svg {
    width: 84%;
    height: 84%;
    color: #34336c;
    transition: .3s linear;
    transform: rotateY(0);
}
.counter-item:hover .counter-icon svg {
    transform: rotateY(180deg);
}
.counter-content .count {
    margin-bottom: 5px;
    line-height: .8;
    font-size: 40px;
    color: var(--tg-white);
    font-weight: 400;
}
.counter-content .count span {
    font-weight: 700;
}
.counter-content p {
    margin-bottom: 0;
    font-size: 15px;
    color: var(--tg-white);
    line-height: 1;
    text-transform: uppercase;
    font-weight: 600;
}

/* counter-two */
.counter-area-two {
    position: relative;
    z-index: 1;
    padding: 120px 0 90px;
}
.counter-bg {
    background-size: cover;
    background-position: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-attachment: fixed;
}
.counter-bg::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.70);
}

/* counter-three */
.counter-item-two .counter-content .count {
    color: var(--tg-secondary-color);
}
.counter-item-two .counter-content p {
    color: var(--tg-secondary-color);
}

/*=============================
	18. Brand
===============================*/
.brand-item {
    border-radius: 10px;
    border: 1px solid #DCDCDC;
    text-align: center;
    /* min-height: 220px; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    margin-bottom: 30px;
    cursor: pointer;
    transition: .3s linear;
    background: var(--tg-white);
}
.brand-item:hover {
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.10);
    border-color: var(--tg-white);
}

/* brand-two */
.brand-area-two {
    padding: 0px 0 25px;
    /*border-top: 1px solid #E4E4E4;*/
}
.brand-item-two {
    display: flex;
    align-items: center;
    justify-content: center;
}
.brand-item-two img {
    cursor: pointer;
    /*filter: grayscale(1);*/
    transition: .3s linear
}
.brand-item-two img:hover {
    filter: grayscale(0);
}
.brand-active .col-12 {
    padding: 0 15px;
}

/* brand-three */
.brand-area-three {
    /*background: var(--tg-section-background);*/
	background:#fff;
}
.brand-item.brand-item-three {
    filter: grayscale(1);
    opacity: .50;
}
.brand-item.brand-item-three:hover {
    opacity: 1;
    filter: grayscale(0);
}

/*=============================
	19. Testimonial
===============================*/
.testimonial-bg {
    background-size: cover;
    background-position: center;
    padding: 120px 0 120px;
}
.testimonial-item {
    border-radius: 10px;
    background: var(--tg-white);
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.05);
    padding: 40px 40px;
    text-align: center;
}
.testimonial-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tg-primary-color);
    color: var(--tg-white);
    font-size: 30px;
    line-height: 1;
    margin: 0 auto 30px;
}
.testimonial-icon svg {
    color: var(--tg-white);
    width: 30px;
}
.testimonial-content p {
    margin-bottom: 35px;
}
.testimonial-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
}
.testimonial-avatar .avatar-thumb {
    width: 40px;
    flex: 0 0 auto;
    margin-right: 10px;
}
.testimonial-avatar .avatar-thumb img {
    border-radius: 50%;
}
.avatar-content .title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 5px;
    color: var(--tg-primary-color);
    text-align: left;
}
.avatar-content span {
    display: block;
    text-align: left;
    font-size: 15px;
    line-height: 1;
}
.testimonial-active [class*="col-"] {
    padding: 0 15px;
}
.testimonial-active .slick-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    gap: 20px;
    margin-top: 60px;
}
.testimonial-active .slick-dots li {
    list-style: none;
    line-height: 0;
}
.testimonial-active .slick-dots li button {
    text-indent: -99999999999px;
    width: 15px;
    height: 15px;
    border: none;
    border-radius: 50%;
    background: #262E32;
    line-height: 1;
}
.testimonial-active .slick-dots li.slick-active button {
    background: var(--tg-primary-color);
    border-radius: 10px;
    width: 30px;
}

/* testimonial-two */
.testimonial-area-two {
    position: relative;
    padding: 120px 0 120px;
    z-index: 1;
}
.testimonial-shape {
    background-size: cover;
    background-position: center;
    width: 1091px;
    position: absolute;
    height: 523px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10%;
    z-index: -1;
}
.testimonial-item-two {
    text-align: center;
}
.testimonial-content-two p {
    font-size: 24px;
    color: var(--tg-secondary-color);
    font-style: italic;
    font-weight: 500;
    line-height: 1.6;
    width: 92%;
    margin: 0 auto 40px;
}
.testimonial-content-two .avatar-content .title {
    color: var(--tg-secondary-color);
}
.testimonial-active-two .col-12 {
    padding: 0 15px;
}

/*=============================
	20. CTA
===============================*/
.cta-bg {
    background-size: cover;
    background-position: center;
    margin-top: 220px;
}
.cta-inner-wrap {
    padding: 85px 0;
    position: relative;
}
.cta-img {
    position: absolute;
    left: 0;
    bottom: 0;
}
.cta-content .section-title .title {
    text-transform: capitalize;
    font-weight: 600;
    line-height: 1.4;
}
.cta-content .call-now {
    display: inline-flex;
    align-items: center;
}
.cta-content .call-now i {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tg-white);
    color: var(--tg-primary-color);
    line-height: 0;
    border-radius: 50%;
    font-size: 20px;
    flex: 0 0 auto;
    margin-right: 15px;
}
.cta-content .call-now a {
    font-size: 40px;
    font-family: var(--tg-heading-font-family);
    color: var(--tg-white);
    line-height: 1;
}
.cta-content .call-now a:hover {
    color: var(--tg-white);
}

/* cta-two */
.cta-item-wrap {
    border-radius: 10px;
    overflow: hidden;
}
.cta-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #161616;
    padding: 57px 30px;
    height: 100%;
}
.cta-item .icon {
    font-size: 55px;
    line-height: 0;
    color: var(--tg-white);
    margin-right: 15px;
}
.cta-item .content span {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--tg-white);
    font-weight: 500;
    margin-bottom: 10px;
}
.cta-item .content a,
.cta-item .content p {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: var(--tg-white);
    margin-bottom: 0;
}
.cta-item-wrap .row [class*="col-"]:nth-child(2) .cta-item {
    background: var(--tg-primary-color);
}

/* cta-three */
.cta-area-three {
    margin-top: -90px;
    position: relative;
    z-index: 2;
}

/*=============================
	21. Error
===============================*/
.error-area {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 0;
}
.error-img {
    text-align: center;
    margin-bottom: 50px;
}
.error-content {
    text-align: center;
}
.error-content .title {
    font-size: 60px;
    margin-bottom: 15px;
}
.error-content p {
    margin-bottom: 35px;
    font-size: 18px;
}

/*=============================
	22. Blog
===============================*/
.blog-post-item {
    margin-bottom: 30px;
}
.blog-meta .list-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;
    margin-bottom: 10px;
}
.blog-meta .list-wrap li {
    font-size: 15px;
    text-transform: capitalize;
}
.blog-meta .list-wrap li i {
    margin-right: 8px;
}
.blog-meta .list-wrap li a {
    color: var(--tg-paragraph-color);
}
.blog-meta .list-wrap li a:hover {
    color: var(--tg-primary-color);
}
.blog-post-content .title {
    margin-bottom: 20px;
    font-size: 24px;
}
.blog-post-content .title a {
	color: inherit;
	display: inline;
	padding-bottom: 0;
	-webkit-transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
	transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
	background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), color-stop(98%, currentColor));
	background-image: linear-gradient(to bottom, currentColor 0%, currentColor 98%);
	background-size: 0 1px;
	background-repeat: no-repeat;
	background-position: left 100%;
}
.blog-post-content .title a:hover {
	background-size: 100% 1px;
    color: var(--tg-primary-color);
}
.blog-post-thumb {
    overflow: hidden;
    border-radius: 10px;
    position: relative;
    margin-bottom: 30px;
}
.blog-post-thumb img {
    width: 100%;
    height: 270px;
    object-fit: cover;
    transform: scale(1);
    transition: all .8s cubic-bezier(.25, .46, .45, .94);
}
.blog-post-item-two:hover .blog-post-thumb img,
.blog-post-item:hover .blog-post-thumb img {
    transform: scale(1.1);
}
.blog-post-thumb .tag {
    position: absolute;
    left: 20px;
    top: 20px;
    font-size: 12px;
    font-family: var(--tg-heading-font-family);
    text-transform: uppercase;
    font-weight: 700;
    color: var(--tg-white);
    background: var(--tg-primary-color);
    display: block;
    padding: 7px 10px;
    border-radius: 5px;
}
.blog-post-thumb .tag:hover {
    background: var(--tg-secondary-color);
    color: var(--tg-white);
}
.blog-post-content p {
    margin-bottom: 20px;
}
.blog-post-content .link-btn {
    font-family: var(--tg-heading-font-family);
    text-transform: uppercase;
    text-decoration: underline;
    font-weight: 500;
    color: var(--tg-paragraph-color);
    display: inline-block;
}
.blog-post-content .link-btn:hover {
    color: var(--tg-secondary-color);
}

/* blog-two */
.blog-post-item-two {
    margin-bottom: 30px;
}
.blog-post-item-two .blog-post-thumb {
    margin-bottom: 25px;
}
.blog-post-item-two .blog-meta .list-wrap {
    margin-bottom: 15px;
}

/* blog-three */
.blog-post-item-three {
    margin-bottom: 30px;
}
.blog-post-thumb-three {
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    position: relative;
}
.blog-post-thumb-three .post-date {
    position: absolute;
    right: 30px;
    top: 30px;
    color: var(--tg-white);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    display: block;
    background: var(--tg-primary-color);
    padding: 12px 14px;
    border-radius: 5px;
}
.blog-post-thumb-three img {
    width: 100%;
    height: 330px;
    object-fit: cover;
    transition: all .8s cubic-bezier(.25, .46, .45, .94);
    transform: scale(1);
}
.blog-post-item-three:hover .blog-post-thumb-three img {
    transform: scale(1.1);
}
.blog-post-content-three {
    border-radius: 0px 0px 10px 10px;
    border: 1px solid #E3E3E3;
    padding: 40px 40px 35px 40px;
    border-top: none;
    transition: .3s linear;
    background: var(--tg-white);
}
.blog-post-item-three:hover .blog-post-content-three {
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.10);
    border-color: var(--tg-white);
}
.blog-post-content-three .tag {
    display: inline-flex;
    align-items: center;
    color: #ABABAB;
    font-size: 15px;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 5px;
}
.blog-post-content-three .tag:hover {
    color: var(--tg-primary-color);
}
.blog-post-content-three .tag i {
    color: var(--tg-primary-color);
    margin-right: 5px;
}
.blog-post-content-three .title {
    margin-bottom: 0;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.35;
}
.blog-post-content-three .title a {
    color: inherit;
    display: inline;
    padding-bottom: 0;
    -webkit-transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
    background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), color-stop(98%, currentColor));
    background-image: linear-gradient(to bottom, currentColor 0%, currentColor 98%);
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: left 100%;
}
.blog-post-content-three .title a:hover {
    background-size: 100% 1px;
    color: var(--tg-primary-color);
}
.blog-active [class*="col-"] {
    padding: 0 15px;
}
.blog-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 50px;
    gap: 20px;
}
.blog-nav .slick-arrow {
    border: none;
    border-radius: 5px;
    background: var(--tg-white);
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.10);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 0;
    -webkit-text-stroke: 1px var(--tg-secondary-color);
    color: transparent;
}
.blog-nav .slick-arrow:hover {
    color: var(--tg-white);
    background: var(--tg-primary-color);
    -webkit-text-stroke: transparent;
}

/* inner-blog */
.blog-item {
    margin-bottom: 30px;
}
.blog-thumb img {
    border-radius: 10px 10px 0 0;
}
.blog-content {
    border-radius: 0px 0px 10px 10px;
    background: var(--tg-white);
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.06);
    padding: 45px 45px;
}
.blog-content .title {
    font-size: 40px;
    margin-bottom: 20px;
}
.blog-content p {
    margin-bottom: 30px;
}
.blog-content .link-btn {
    font-family: var(--tg-heading-font-family);
    text-transform: uppercase;
    text-decoration: underline;
    font-weight: 500;
    color: var(--tg-secondary-color);
    display: inline-block;
    line-height: 1;
}
.blog-content .link-btn:hover {
    color: var(--tg-primary-color);
}

/* blog-sidebar */
.blog-sidebar {
    border-radius: 10px;
    border: 1px solid #CFCFCF;
    padding: 40px 25px 50px;
    position: sticky;
    top: 100px;
}
.blog-widget {
    margin-bottom: 40px;
}
.blog-widget:last-child {
    margin-bottom: 0;
}
.widget-title {
    font-size: 22px;
    margin-bottom: 15px;
}
.sidebar-search form {
    position: relative;
}
.sidebar-search form input {
    width: 100%;
    border-radius: 2px;
    border: 1px solid #E9E9E9;
    font-size: 14px;
    font-weight: 400;
    color: var(--tg-secondary-color);
    padding: 20px 80px 20px 24px;
    line-height: 1;
    height: 60px;
}
.sidebar-search form input::placeholder {
    font-size: 14px;
    font-weight: 400;
    color: #9C9C9C;
}
.sidebar-search form button {
    border: none;
    position: absolute;
    right: 0;
    top: 0;
    height: 60px;
    width: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tg-primary-color);
    color: var(--tg-white);
    font-size: 18px;
    border-radius: 0 2px 2px 0;
}
.sidebar-search form button:hover {
    background: var(--tg-secondary-color);
}
.rc-post-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #D9D9D9;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.rc-post-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.rc-post-item .thumb {
    width: 90px;
    flex: 0 0 90px;
    margin-right: 10px;
}
.rc-post-item .thumb img {
    border-radius: 2px;
}
.rc-post-item .content .title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}
.rc-post-item .content span {
    display: flex;
    align-items: center;
    line-height: 1;
    font-size: 14px;
    color: #8E8E8E;
    gap: 8px;
}
.sidebar-cat-list .list-wrap li {
    border-bottom: 1px solid #D9D9D9;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.sidebar-cat-list .list-wrap li:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}
.sidebar-cat-list .list-wrap li a {
    color: #757589;
    display: flex;
    align-items: center;
    line-height: 1.4;
    font-weight: 600;
    font-family: var(--tg-heading-font-family);
    gap: 5px;
}
.sidebar-cat-list .list-wrap li a:hover {
    color: var(--tg-primary-color);
}
.sidebar-tag-list .list-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.sidebar-tag-list .list-wrap li a {
    color: #757589;
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    border-radius: 2px;
    border: 1px solid #E0E0E0;
    display: block;
    padding: 10px 11px;
}
.sidebar-tag-list .list-wrap li a:hover {
    background: var(--tg-primary-color);
    border-color: var(--tg-primary-color);
    color: var(--tg-white);
}

/* blog-details */
.blog-content.blog-details-content .title {
    font-size: 30px;
}
.blog-details-content blockquote {
    margin: 0 0 50px;
    text-align: center;
    border-radius: 10px;
    border: 1px solid var(--tg-primary-color);
    padding: 35px 30px;
}
.blog-details-content blockquote .icon {
    font-size: 50px;
    line-height: 1;
    color: var(--tg-primary-color);
    margin-bottom: 10px;
}
.blog-details-content blockquote p {
    color: var(--tg-secondary-color);
    font-family: var(--tg-heading-font-family);
    font-size: 18px;
    font-style: italic;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 20px;
}
.blog-details-content blockquote cite {
    font-style: normal;
    font-size: 18px;
    font-family: var(--tg-heading-font-family);
    font-weight: 700;
    color: var(--tg-secondary-color);
    line-height: 1;
}
.bd-img-wrap {
    margin-top: 40px;
}
.bd-img-wrap img {
    border-radius: 10px;
    margin-bottom: 30px;
}
.bd-img-wrap .row {
    --bs-gutter-x: 20px;
}
.post-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.bd-content-bottom .post-tags .title {
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 500;
}
.post-tags .list-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.post-tags .list-wrap li a {
    color: #757589;
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    text-transform: uppercase;
    display: block;
    border-radius: 2px;
    border: 1px solid #E0E0E0;
    padding: 10px 12px;
}
.post-tags .list-wrap li a:hover {
    background: var(--tg-primary-color);
    color: var(--tg-white);
    border-color: var(--tg-primary-color);
}
.blog-post-share .list-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
}
.blog-post-share .list-wrap li a {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tg-secondary-color);
    color: var(--tg-white);
    font-size: 15px;
}
.blog-post-share .list-wrap li a:hover {
    background: var(--tg-primary-color);
}
.comments-wrap {
    border-top: 1px solid #D9D9D9;
    padding-top: 60px;
    margin-top: 60px;
}
.comments-wrap-title {
    font-size: 22px;
    margin-bottom: 35px;
}
.comments-box {
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid #D9D9D9;
    padding-bottom: 40px;
    margin-bottom: 40px;
}
.latest-comments .children .comments-box {
    padding: 0 0 40px 100px;
}
.latest-comments > .list-wrap > li:last-child .comments-box {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.comments-avatar {
    width: 80px;
    flex: 0 0 auto;
    margin-right: 20px;
}
.comments-text .avatar-name .name {
    font-size: 18px;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    justify-content: space-between;
}
.comments-text .comment-reply-link {
    color: var(--tg-primary-color);
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    display: block;
    border-radius: 2px;
    background: #FFF7F3;
    padding: 8px 12px;
    text-transform: uppercase;
}
.comments-text .comment-reply-link:hover {
    background: var(--tg-primary-color);
    color: var(--tg-white);
}
.comments-text .avatar-name .date {
    display: block;
    font-size: 14px;
    line-height: normal;
}
.comments-text .avatar-name {
    margin-bottom: 20px;
}
.comments-text p {
    margin-bottom: 0;
}
.latest-comments {
    margin-bottom: 70px;
}
.comment-reply-title {
    font-size: 22px;
    margin-bottom: 30px;
}
.comment-form .row {
    --bs-gutter-x: 10px;
}
.comment-form .form-grp {
    margin-bottom: 10px;
}
.comment-form .form-grp textarea,
.comment-form .form-grp input {
    border-radius: 5px;
    border: 1px solid #BDBDBD;
    width: 100%;
    color: var(--tg-secondary-color);
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    padding: 20px 15px;
    height: 60px;
    display: block;
}
.comment-form .form-grp textarea {
    min-height: 184px;
    max-height: 184px;
}
.comment-form .form-grp textarea::placeholder,
.comment-form .form-grp input::placeholder {
    color: #9B9B9B;
    font-size: 15px;
    font-weight: 400;
}
.comment-form .checkbox-grp {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    margin-top: 30px;
}
.comment-form .checkbox-grp input {
    width: 15px;
    margin-top: 3px;
    margin-right: 10px;
    height: 15px;
    border-radius: 2px;
}
.comment-form .checkbox-grp label {
    color: var(--tg-secondary-color);
    user-select: none;
    line-height: 1.4;
    font-weight: 500;
    font-size: 15px;
}
.blog-style-one .blog-post-item-two {
    margin-bottom: 50px;
}
.blog-style-two .blog-post-item {
    margin-bottom: 60px;
}

/*=============================
	23. Contact
===============================*/
.contact-info-item {
    border-radius: 10px;
    border: 1px solid #C2C2C2;
    text-align: center;
    padding: 50px 30px 40px;
    margin-bottom: 35px;
}
.contact-info-item .icon {
    font-size: 38px;
    line-height: 1;
    color: #34336c;
    margin-bottom: 22px;
}
.contact-info-item .content .title {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
}
.contact-info-item .content p {
    margin-bottom: 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--tg-secondary-color);
    line-height: 1.54;
    text-align: justify;
}
.contact-info-item .content p a {
    color: var(--tg-secondary-color);
}
.contact-info-item .content p a:hover {
    color: var(--tg-primary-color);
}
.contact-form-wrap {
    border-radius: 10px;
    background: var(--tg-secondary-color);
    padding: 45px 35px;
}
.contact-form-wrap .title {
    color: var(--tg-white);
    font-size: 30px;
    margin-bottom: 30px;
}
.contact-form-wrap .form-grp {
    margin-bottom: 20px;
}
.contact-form-wrap .form-grp textarea,
.contact-form-wrap .form-grp input {
    width: 100%;
    border-radius: 5px;
    border: 1px solid #5C5C5C;
    background: transparent;
    color: var(--tg-white);
    font-size: 15px;
    font-weight: 400;
    padding: 15px 22px;
    height: 50px;
    line-height: 1;
    display: block;
}
.contact-form-wrap .form-grp textarea {
    min-height: 183px;
    max-height: 183px;
}
.contact-form-wrap .form-grp textarea::placeholder,
.contact-form-wrap .form-grp input::placeholder {
    color: #898989;
    font-size: 15px;
    font-weight: 400;
}
.contact-form-wrap .btn:hover {
    color: var(--tg-primary-color);
}
.contact-form-wrap .btn::before {
    background: var(--tg-white);
}
.contact-form-wrap .row {
    --bs-gutter-x: 20px;
}
.contact-map {
    width: 100%;
    height: 100%;
}
.contact-map iframe {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.ajax-response.error {
    margin-top: 20px;
    color: red;
}
.ajax-response.success {
    margin-top: 20px;
    color: green;
}

/*=============================
	24. Footer
===============================*/
.footer-area {
    background:#28274c;
}
.footer-newsletter-wrap {
    padding: 60px 0;
    border-bottom: 1px solid #464646;
}
.footer-logo img {
    max-height: 58px;
}
.footer-newsletter-form form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 20px;
}
.footer-newsletter-form .form-grp {
    position: relative;
    width: 370px;
}
.footer-newsletter-form .form-grp input {
    width: 100%;
    border-radius: 5px;
    border: 1px solid var(--tg-gray-two);
    background: transparent;
    font-size: 14px;
    color: var(--tg-white);
    padding: 17px 35px;
    line-height: 1;
    height: 50px;
}
.footer-newsletter-form .form-grp input::placeholder {
    font-size: 14px;
    color: var(--tg-gray-two);
}
.footer-newsletter-form .form-grp label {
    font-size: 14px;
    color: var(--tg-gray-two);
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}
.footer-top {
    padding: 90px 0 20px;
}
.footer-widget {
    margin-bottom: 40px;
}
.fw-title {
    font-size: 18px;
    margin-bottom: 25px;
    color: var(--tg-white);
    font-weight: 500;
    font-family: "Roboto", Helvetica, Arial, Verdana, sans-serif;
}
.footer-contact .list-wrap li {
    display: flex;
    align-items: baseline;
    font-size: 15px;
    color: #fff;
    line-height: 1.8;
    margin-bottom: 20px;
}
.footer-contact .list-wrap li:last-child {
    margin-bottom: 0;
}
.footer-contact .list-wrap li a {
    color: #fff;
}
.footer-contact .list-wrap li a:hover {
    color: var(--tg-primary-color);
}
.footer-contact .list-wrap li i {
    font-size: 18px;
    color: #fff;
    margin-right: 15px;
    transform: translateY(2px);
}
.footer-link .list-wrap li {
    padding-left: 17px;
    position: relative;
    line-height: 1.2;
    margin-bottom: 20px;
}
.footer-link .list-wrap li:last-child {
    margin-bottom: 0;
}
.footer-link .list-wrap li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: #ffffff;
}
.footer-link .list-wrap li a {
    color: #ffffff;
    font-size: 15px;
    position: relative;
}
.footer-link .list-wrap li a:hover {
    color: var(--tg-white);
}
.footer-link .list-wrap li a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--tg-white);
    -webkit-transform-origin: right top;
    -ms-transform-origin: right top;
    transform-origin: right top;
    -webkit-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
    transition: transform 0.4s cubic-bezier(.74, .72, .27, .24);
}
.footer-link .list-wrap li a:hover::before {
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
}
.materials-list .list-wrap li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}
.materials-list .list-wrap li:last-child {
    margin-bottom: 0;
}
.materials-list .list-wrap li .icon {
    font-size: 35px;
    line-height: 1;
    margin-right: 15px;
    color: #6B6B6B;
}
.materials-list .list-wrap li .content .title {
    font-size: 18px;
    font-weight: 400;
    color: var(--tg-white);
    margin-bottom: 10px;
}
.materials-list .list-wrap li .content span {
    display: block;
    line-height: 1;
    font-size: 15px;
    color: var(--tg-gray-three);
}
.footer-bottom {
    border-top: 1px solid #464646;
    padding: 15px 0;
}
.copyright-text p {
    margin-bottom: 0;
    font-size: 15px;
    color: #fff;
}
.copyright-text p a {
    color: var(--tg-white);
    font-weight: 600;
}
.copyright-text p a:hover {
    color: var(--tg-primary-color);
}
.footer-social .list-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}
.footer-social .list-wrap li a {
    font-size: 14px;
    color: var(--tg-gray-three);
}
.footer-social .list-wrap li a:hover {
    color: var(--tg-white);
}

/* footer-two */
.footer-area-two {
    background: #171717;
}
.footer-top-two {
    padding: 90px 0 40px;
}
.footer-newsletter-two {
    position: relative;
    height: 100%;
}
.footer-newsletter-two::before {
    content: "";
    position: absolute;
    right: 80px;
    top: 0;
    width: 1px;
    height: 88%;
    background: #464646;
}
.footer-top-two .footer-newsletter-form form {
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
}


/*=============================
	25. Preloader
===============================*/
#preloader {
    background: var(--tg-white);
    height: 100%;
    width: 100%;
    position: fixed;
    margin-top: 0px;
    top: 0px;
    z-index: 999;
}
.ta-preloader-block {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    text-align: center;
}
.ta-spinner-eff {
    position: relative;
    width: 50px;
    height: 50px;
    -webkit-animation: taRotation 12.8s steps(1) 0s infinite;
    animation: taRotation 12.8s steps(1) 0s infinite;
}
.ta-spinner-eff .ta-bar {
    position: absolute;
    background-color: var(--tg-primary-color);
}
.ta-spinner-eff .ta-bar-top {
    width: 100%;
    height: 7px;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: left top;
    transform: scale(0, 1);
    -webkit-animation: bar-top 3.2s linear 0s infinite;
    animation: bar-top 3.2s linear 0s infinite;
}
.ta-spinner-eff .ta-bar-right {
    width: 7px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    transform-origin: left top;
    transform: scale(1, 0);
    -webkit-animation: bar-right 3.2s linear 0s infinite;
    animation: bar-right 3.2s linear 0s infinite;
}
.ta-spinner-eff .ta-bar-bottom {
    width: 100%;
    height: 7px;
    position: absolute;
    right: 0;
    bottom: 0;
    transform-origin: right top;
    transform: scale(0, 1);
    -webkit-animation: bar-bottom 3.2s linear 0s infinite;
    animation: bar-bottom 3.2s linear 0s infinite;
}
.ta-spinner-eff .ta-bar-left {
    width: 7px;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    transform-origin: left bottom;
    transform: scale(1, 0);
    -webkit-animation: bar-left 3.2s linear 0s infinite;
    animation: bar-left 3.2s linear 0s infinite;
}
@keyframes taRotation {
    0% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(90deg);
    }
    50% {
      transform: rotate(180deg);
    }
    75% {
      transform: rotate(270deg);
    }
    100% {
      transform: rotate(360deg);
    }
}
@keyframes bar-top {
    0% {
        transform: scale(0,1);
    }
    12.5% {
        transform: scale(1,1);
    }
    87.5% {
        transform: scale(1,1);
    }
    100% {
        transform: scale(0,1);
    }
}
@keyframes bar-right {
    0% {
        transform: scale(1,0);
    }
    12.5% {
        transform: scale(1,0);
    }
    25% {
        transform: scale(1,1);
    }
    75% {
        transform: scale(1,1);
    }
    87.5% {
        transform: scale(1,0);
    }
    100% {
        transform: scale(1,0);
    }
}
@keyframes bar-bottom {
    0% {
        transform: scale(0,1);
    }
    25% {
        transform: scale(0,1);
    }
    37.5% {
        transform: scale(1,1);
    }
    62.5% {
        transform: scale(1,1);
    }
    75% {
        transform: scale(0,1);
    }
    100% {
        transform: scale(0,1);
    }
}
@keyframes bar-left {
    0% {
        transform: scale(1,0);
    }
    37.5% {
        transform: scale(1,0);
    }
    50% {
        transform: scale(1,1);
    }
    62.5% {
        transform: scale(1,0);
    }
    100% {
        transform: scale(1,0);
    }
}