/*!
Theme Name: techografix
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: techografix
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

techografix is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}


/* font */

@font-face {
	font-family: 'Outfit';
	src: url('/wp-content/themes/techografix/fonts/static/Outfit-Regular.ttf') format('truetype');
	font-style: normal;
	font-weight: 400;
}

@font-face {
	font-family: 'Outfit';
	src: url('wp-content/themes/techografix/fonts/static/Outfit-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Outfit';
	src: url('/wp-content/themes/techografix/fonts/static/Outfit-SemiBold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
	font-weight: 600;
}

@font-face {
	font-family: 'Outfit';
	src: url('/wp-content/themes/techografix/fonts/static/Outfit-Light.ttf') format('truetype');
	font-style: normal;
	font-weight: 300;
}

@font-face {
	font-family: 'Outfit';
	src: url('/wp-content/themes/techografix/fonts/static/Outfit-ExtraLight.ttf') format('truetype');
	font-style: normal;
	font-weight: 100;
}

@font-face {
	font-family: 'Outfit';
	src: url('/wp-content/themes/techografix/fonts/static/Outfit-Medium.ttf') format('truetype');
	font-style: normal;
	font-weight: 500;
}


:root {
	--primary-color: #193B68;
	--secondary-color: #E21F26;
	--white-color: #FFFFFF;
	--black-color: #000000;
	--light-pink: #FFEFEA;
	--light-blue: #CED5E0;
	--off-white: #BAC5D2;
	--font-family: 'Outfit', sans-serif;
	--light-bg: #F0F7FF;
	--light-blue-bg: #E3E3E3;
	--history-line: #DAD1D1;
	--green-color: #008000;
}

body {
	font-family: var(--font-family);
	font-size: 16px;
	line-height: 22px;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}

section {
	overflow: hidden;
}

.container {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}

a {
	text-decoration: none;
}

.text-center {
	text-align: center;
	margin: 0 auto;
}

.white-border {
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.uppercase {
	text-transform: uppercase;
}

/* header */
.admin-bar header {
	top: 31px !important;
}

header {
	position: sticky;
	top: 0;
	z-index: 999;
	background-color: var(--white-color);
	box-shadow: 0px 7px 15px 0px rgba(0, 0, 0, .08235294117647059);
}

.main-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 0;
}

.header-logo {
	max-width: 114px;
	height: 62px;
	object-fit: cover;
}

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

.header-links li a {
	text-decoration: none;
	color: var(--primary-color);
	font-size: 16px;
	font-family: var(--font-family);
	font-weight: 400;
	letter-spacing: 0px;
	padding-bottom: 4px;
	position: relative;

}

.header-links li {
	list-style: none;
	padding-left: 32px;
}

.header-links li a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	transform-origin: left bottom;
	transform: scaleX(0);
	background: var(--primary-color);
	transition: transform 0.5s ease;
}

.header-links li a:hover::after {
	transform: scaleX(0.8);
}

.hamburger-icon {
	cursor: pointer;
	width: 28px;
	height: 16px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	visibility: hidden;
	z-index: 10;
}

.hamburger-icon .line {
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background-color: var(--primary-color);
	transition: all 0.3s ease;
}

.hamburger-icon.open .line-1 {
	transform: rotate(45deg);
	position: absolute;
	top: 6px;
}

.hamburger-icon.open .line-2 {
	opacity: 0;
}

.hamburger-icon.open .line-3 {
	transform: rotate(-45deg);
	position: absolute;
	bottom: 8px;
}

.nav-links.active {
	display: block;
}

/* .current-menu-item{
	color: ;
} */
.header-links .current-menu-item>a::after {
	transform: scaleX(0.8);
}

/* first sec */
.banner-sec {
	padding: 142px 0 82px 0;
	background-color: var(--primary-color);
	position: relative;
	overflow: hidden;
}

.banner-left-animation {
	position: absolute;
	top: -70px;
	z-index: 5;
	max-width: 224px;
	width: 100%;
}

.banner-right-animation {
	position: absolute;
	right: -50px;
	top: -50px;
	max-width: 532px;
	width: 100%;
	opacity: 0.5;
}

.banner-sec-con {
	gap: 100px;
}

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

.banner-left {
	display: flex;
	flex-direction: column;
	gap: 46px;
	width: 53%;
}

.banner-left h1 {
	font-weight: 300;
	font-size: 80px;
	line-height: normal;
	color: var(--white-color);
}

.banner-left h1 span {
	font-weight: 600;
}

.btn-con {
	display: flex;

}

.banner-right {
	width: 42%;
}

.banner-right img {
	width: 100%;
	max-width: 547px;
	position: relative;
}

.custom-cta {
	font-size: 16px;
	text-transform: uppercase;
	padding: 4px 4px 4px 23px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: none;
	font-weight: 500;
	border-radius: 50px;
	text-decoration: none;
	letter-spacing: 1px;
}


.custom-cta img {
	padding: 14px;
	margin-left: 14px;
	background-color: var(--white-color);
	border-radius: 50%;
	transition: transform 0.3s ease;
	transform: scale(0.9);
}

.org-btn {
	background-color: var(--secondary-color);
	color: var(--white-color);
	transition: background-color 0.3s ease;
}

.tr-btn {
	background-color: transparent;
	color: var(--white-color);
	margin-left: 17px;
	transition: background-color 0.3s ease;
}

.custom-cta:hover img {
	transform: scale(1);

}

.scrolldown-btn {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	/* margin-top: 20px; */
	padding-right: 85px;
}

@keyframes rotateText {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.rotating-text {
	animation: rotateText 10s linear infinite;
	transform-origin: 80px 100px;
}

/* second sec */
.welcome-sec h2 {
	font-weight: 600;
	font-size: 60px;
	color: var(--primary-color);
	line-height: normal;
}

.welcome-left {
	width: 46%;
}

.welcome-sec-con {
	gap: 81px;
}

.welcome-right {
	position: relative;
	width: 48%;
	z-index: 2;
}

.welcome-right img {
	width: 100%;
	max-width: 569px;
	border-top-left-radius: 75px;
}

.svg-scroll-container {
	position: relative;
	position: absolute;
	top: 0;
	left: 30px;
	z-index: -1;
}

.svg-scroll-content {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	animation: scroll-up 10s linear infinite;
}

@keyframes scroll-up {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-840px);
	}
}

.welcome-left .welcome-subtitle {
	font-weight: 300;
	font-size: 40px;
	color: var(--primary-color);
	line-height: normal;

}

.welcome-sec {
	background-color: var(--light-pink);
	padding: 149px 0 219px 0;
	overflow: hidden;

}

.welcome-para {
	font-size: 20px;
	color: var(--secondary-color);
	line-height: 22px;
	margin: 20px 0 21px 0;
	font-weight: 300;
}

.blue-btn {
	background-color: var(--primary-color);
	color: var(--white-color);
	transition: background-color 0.3s ease;
}

/* third sec */
.what-we-do-sec {
	background-color: var(--primary-color);
	padding: 100px 0 85px 0;
	position: relative;
	overflow: hidden;
}

.title-heading {
	font-size: 42px;
	font-weight: 300;
	line-height: normal;
	color: var(--primary-color);
	width: fit-content;
}

.red-underline {
	border-bottom: 1px solid var(--secondary-color);
	outline-offset: 4px;
}

.white-text {
	color: var(--white-color);

}

.title-heading span {
	font-weight: 600;
}

.wwd-con {
	gap: 72px
}

.wwd-left {
	width: 45%;
}

.wwd-right {
	width: 55%;
}

.wwd-right div:first-child {
	gap: 20px;
}

.wwd-left img {
	max-width: 519px;
	width: 100%;
}

.accordion {
	margin-top: 40px;
}

.accordion-item {
	border-bottom: 1px solid var(--white-color);
	/* margin-bottom: 5px; */
}

.accordion-header {
	background-color: transparent;
	text-align: left;
	width: 100%;
	border: none;
	font-size: 34px;
	line-height: normal;
	cursor: pointer;
	padding: 31px 0 39px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--white-color);
}

.accordion-toggle {
	font-size: 20px;
	font-weight: bold;
	transition: transform 0.4s ease;
}

.accordion-toggle img {
	display: block;
}

.accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

.accordion-content p {
	color: var(--white-color);
	font-size: 16px;
	line-height: 24px;
	font-weight: 300;
	margin: 2px 0 49px 0;
}



.accordion-header.active+.accordion-content {
	max-height: 500px;
}

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

/* fourth sec */
.why-us {
	background-color: var(--light-blue);
	padding: 100px 0 60px 0;
}

.why-us {
	background-color: var(--light-blue);
	padding: 100px 0 60px 0;
}

.why-us .title-heading {
	color: var(--primary-color);
}

.why-us-flex-con {
	display: flex;
	flex-wrap: wrap;
	gap: 79px 20px;
	margin-top: 76px;
	justify-items: center;
	justify-content: center;
}

.flex-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	background-color: var(--white-color);
	border-radius: 10px;
	padding: 0 20px;
	width: calc(25% - 16px);
	min-height: 185px;
	text-align: center;
	transition: background-color 0.3s ease;
}

.flex-item img {
	position: absolute;
	z-index: 1;
	top: -36px;
	left: 0;
	right: 0;
	margin: 0 auto;
	transition: transform 0.3s ease-in-out;
}

.flex-item p {
	font-size: 20px;
	font-weight: 500;
	line-height: 24px;
	text-transform: uppercase;
	color: var(--primary-color);
	transition: color 0.3s ease;
}

.flex-item:hover {
	background-color: var(--secondary-color);
}

.flex-item:hover img {
	transform: rotate(7deg);
}

.flex-item:hover p {
	color: var(--white-color);
}


/* fifth sec */
.our-expertise-sec {
	padding: 100px 0;
}

.grid-con {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 20px;
	margin-top: 40px;
}

.grid-con .grid-item {
	grid-column: span 6;
}

.grid-con .grid-item:first-child {
	grid-row-start: 1;
	grid-row-end: 3;
}

.grid-con .grid-item:nth-child(4) {
	grid-column: span 9;

}

.grid-con .grid-item:nth-child(5) {
	grid-column: span 3;

}

.grid-con .grid-item:nth-child(4) img,
.grid-con .grid-item:nth-child(5) img {
	height: 335px;
	object-fit: cover;
}

.grid-con .grid-item img {
	border-radius: 5px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

img.grid-top-left-img {
	max-height: 438px;
}

img.grid-top-right-img {
	max-height: 209px;
}


img.grid-bottom-left-img,
img.grid-bottom-right-img {
	max-height: 335px;
}

/* sixth sec */
.get-in-touch-con {
	padding-bottom: 160px;
	display: flex;
	padding-top: 30px;
}

.contact-detail {
	background-color: var(--primary-color);
	width: 48%;
	padding: 56px 31px 156px 31px;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
}

.contact-form {
	width: 52%;
}

.contact-detail h4 {
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	color: var(--secondary-color);
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.contact-detail a {
	font-size: 24px;
	font-weight: 400;
	line-height: normal;
	color: var(--white-color);
}

.address-text {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	margin-top: 56px;
	padding-top: 42px;

}

.address {
	font-weight: 400;
	font-size: 18px !important;
	line-height: normal;
	color: var(--white-color);
	letter-spacing: 1px;
	display: block;
}

.email-text {
	margin-top: 31px;
	padding-top: 57px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);

}

.contact-detail h4,
.contact-detail a {
	padding-left: 9px;
	padding-right: 9px;
}

.contact-form {
	background-color: var(--light-pink);
	border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
}


/* about page */
.what-we-are-content {
	width: 66%;
	margin-bottom: 161px;
}

.paragraph-text {
	font-size: 18px;
	color: var(--white-color);
}

.what-we-are-content div {
	margin-top: 22px;

}

.what-we-are-content div p:nth-child(1) {
	margin-bottom: 24px;
}

.philosophy-sec {
	background-color: var(--light-pink);
	padding: 100px 0 149px 0;
}

.philosophy-con {
	align-items: flex-start !important;
	gap: 72px;
}

.philosophy-paragraphs {
	width: 57%;
}

.philosophy-paragraphs p {
	color: var(--primary-color);
}

.philosophy-con h3 {
	width: 43%;
}

.philosophy-paragraphs p:nth-child(2) {
	margin: 24px 0;
}

.vision-mision {
	padding: 100px 0;
}

.vision-con {
	gap: 20px;
	padding-left: 55px;
}

.vision-content p,
.mision-content p {
	margin-top: 20px;
	color: var(--primary-color);
	font-weight: 300;
}

.mision-con {
	flex-direction: row-reverse;
	gap: 20px;
	padding-right: 55px;
}

.vision-mision-con {
	gap: 75px;
	flex-direction: column;
	max-width: 1088px;
	width: 100%;
	margin: 0 auto;
}

/* products page  */
.Packaging-and-promotional {
	position: relative;
	background-color: var(--primary-color);
	overflow: hidden;
}

.packaging-sec {
	padding: 86px 0 120px 0;
}

.promotional-sec {
	margin-bottom: 136px;
}

.empty-text {
	position: relative;
	-webkit-background-clip: text;
	font-weight: 600;
	background-color: #BAC5D2;
	font-size: 128px;
	letter-spacing: 1px;
	color: white;
	line-height: normal;
	text-transform: uppercase;
	-webkit-text-stroke-color: transparent;
	-webkit-text-stroke-width: calc(1em / 40);
}

.tabs-con {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.tab-content-con {
	width: 500px;
	max-width: 100%;
}

.tabcontent,
.pr-tabcontent {
	display: none;
	width: 100%;
	max-width: 500px;
	height: 344px;
	object-fit: cover;
	transition: transform 0.3s ease;
	border-radius: 20px;
}

.tabcontent.active,
.pr-tabcontent.active {
	display: block;
}

.tab-links.active,
.pr-tab-links.active {
	background-color: var(--primary-color);
	color: #fff;
}

.tabs-con button {
	font-size: 24px;
	font-weight: 600;
	line-height: 28px;
	color: var(--primary-color);
	padding: 10px 33px;
	border-radius: 30px;
	border: none;
	background-color: transparent;
	border: 1px solid var(--off-white);
	transition: background-color 0.3s ease, color 0.3s ease !important;
	width: max-content;
	cursor: pointer;
	font-family: var(--font-family);
}

.tabs-con button:hover {
	background-color: var(--primary-color);
	color: var(--white-color);
}

.tab-container {
	display: flex;
	align-items: center;
	max-width: 980px;
	width: 100%;
	margin: 0 auto;
	gap: 142px;
	margin-top: -40px;
}

.bg-light {
	background-color: var(--light-bg);
	padding-top: 43px;
}

/* footer */
.footer {
	background-color: var(--primary-color);
	padding: 38px 0 30px 0;
}

.footer-main-con {
	display: flex;
	justify-content: space-between;
}

.footer-logo-con {
	width: 30%;
}

.footer-logo-con .sbscribe-text {
	font-size: 14px;
	font-weight: 400;
	color: var(--white-color);
	line-height: normal;
	margin: 46px 0 16px 0;
	letter-spacing: 1px;
}

.subscription-con {
	position: relative;
}

.subscription-con form {
	position: relative;
}

.subscription-con input:first-child {
	border-radius: 62px;
	border: none;
	width: 100%;
	font-size: 16px;
	color: var(--primary-color);
	padding: 14px 43px 14px 24px;
}

.subscription-con input:first-child br,
.subscription-con p br {
	display: none;
}

.subscription-con input:first-child::placeholder {
	text-transform: capitalize;
	font-size: 16px;
	line-height: normal;
	color: var(--primary-color);
	letter-spacing: 1px;
}

.subscription-con input:focus {
	outline: none;

}

/* subscription form */
.wpcf7-spinner {
	display: none;
}

.subscription-con button {
	position: absolute;
	right: 8px;
	background: transparent;
	border: none;
}

.subscription-con .wpcf7-submit {
	border: none;
	background-position: center;
	background-color: var(--secondary-color);
	border-radius: 50px;
	background-repeat: no-repeat;
	padding: 16px;
	right: 7px;
	font-size: 0;
	top: 7px;
	background-image: url(/wp-content/themes/techografix/images/subscriptionarrow.svg);
	position: absolute;
	cursor: pointer;
}

.wpcf7 form .wpcf7-response-output {
	/* color: var(--green-color); */
	border: none;
	padding: 10px 0 0 0;
	margin: 0;
	font-size: 14px;
	line-height: normal;
}

.subscription-con .wpcf7 form .wpcf7-response-output {
	color: white;
	padding: 10px 0 0 0;
}

.wpcf7-not-valid-tip {
	margin: 4px 0 0 0;
	font-size: 14px;
}

.footer-links-con {
	width: 49%;
}

.footer-links {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.footer-bottom-link {
	margin-top: 74px;
	color: var(--off-white);
}

.footer-links ul li {
	list-style: none;
	margin-bottom: 18px;

}

.footer-links ul li a {
	font-size: 18px;
	letter-spacing: 0px;
	line-height: normal;
	font-weight: 400;
	color: var(--off-white);
	transition: color 0.3s ease;
}

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

.footer-links-con h4 {
	font-size: 22px;
	line-height: normal;
	font-weight: 600;
	margin-bottom: 22px;
	color: var(--white-color);
}

.social-icons a {
	margin-left: 32px;
	display: inline-block;
}

.social-icons a:first-child {
	margin-left: 0;
}

.footer-bottom-link p,
.footer-bottom-link a {
	font-size: 14px;
	line-height: normal;
	color: var(--off-white);

}


/* infrastructure page */
.Infrastructure-sec {
	position: relative;
	background-color: var(--primary-color);
	overflow: hidden;
	padding: 88px 0;
}

.Infrastructure-con .Infrastructuretext {
	width: 43%;
}

.Infrastructure-con img {
	width: 52%;
	border-radius: 10px;
}

.Infrastructure-con {
	gap: 121px;
	position: relative;
	z-index: 3;
}

/* history sec */
.history-sec {
	padding: 64px 0 75px;
	background-color: var(--light-blue-bg);
	background-image: url(/wp-content/themes/techografix/images/historybg.jpg);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: cover;
}

.history-con {
	--col-gap: 2rem;
	--row-gap: 9rem;
	--line-w: 0.25rem;
	display: grid;
	grid-template-columns: var(--line-w) 1fr;
	grid-auto-columns: max-content;
	column-gap: var(--col-gap);
	list-style: none;
	/* width: min(869px, 90%); */
	width: min(869px, 66%);
	margin-inline: auto;

}

/* line */
.history-con::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / span 4;
	background-color: var(--history-line);
	border-radius: calc(var(--line-w) / 2);
	position: relative;
	top: 35px;
}

/* columns*/

/* row gaps */
.history-con li:not(:last-child) {
	margin-bottom: var(--row-gap);
}

.history-con li .descr ul li:not(:last-child) {
	margin-bottom: 4px;
}

/* card */
.history-con li {
	grid-column: 2;
	--inlineP: 1.5rem;
	margin-inline: var(--inlineP);
	grid-row: span 2;
	display: grid;
	grid-template-rows: min-content min-content min-content;
}

/* date */
.history-con li .date {
	--dateH: 55px;
	height: var(--dateH);
	margin-inline: calc(var(--inlineP) * -1);
	text-align: center;
	background-color: var(--primary-color);
	color: var(--white-color);
	font-size: 24px;
	font-weight: 500;
	text-transform: uppercase;
	display: grid;
	place-content: center;
	position: relative;
	border-radius: calc(var(--dateH) / 2) 0 0 calc(var(--dateH) / 2);
}

.history-con li:nth-child(odd) .date {
	padding-left: 40px;
	justify-content: flex-start;
}

.history-con li:nth-child(even) .date {
	padding-right: 40px;
	justify-content: flex-end;
}

/* date flap */
.history-con li .date::before {
	content: "";
	width: var(--inlineP);
	aspect-ratio: 1;
	background: var(--primary-color);
	background-image: linear-gradient(rgba(0, 0, 0, 0.2) 100%, transparent);
	position: absolute;
	top: 100%;

	clip-path: polygon(0 0, 100% 0, 0 100%);
	right: 0;
}

/* circle */
.history-con li .date::after {
	content: "";
	position: absolute;
	width: 14px;
	aspect-ratio: 1;
	background: var(--white-color);
	border: 0.3rem solid var(--accent-color);
	border-radius: 50%;
	top: 50%;

	transform: translate(50%, -50%);
	right: calc(100% + var(--col-gap) + var(--line-w) / 2);
}

/* title descr */
.history-con li .title,
.history-con li .descr {
	background: var(--white-color);
	position: relative;
	padding-inline: 1.5rem;
}

.history-con li .title {
	overflow: hidden;
	padding-block-start: 1.5rem;
	padding-block-end: 1rem;
	font-weight: 500;
}

.history-con li .descr {
	font-weight: 300;
	padding: 20px 16px;

}

.history-number-left {
	background-color: var(--secondary-color);
	position: absolute;
	z-index: 9;
	margin-top: -5px;
	margin-left: -59px;
	padding: 21px 8px;
	transform: skew(-20deg);
	font-size: 38px;
	color: var(--white-color);
	font-weight: 100;
	width: 60px;
	height: 63px;
	justify-content: center !important;
	align-items: center !important;
}

.history-number-right {
	background-color: var(--secondary-color);
	position: absolute;
	z-index: 9;
	margin-top: -7px;
	margin-left: -65px;
	padding: 21px 8px;
	transform: skew(-20deg);
	font-size: 38px;
	color: var(--white-color);
	font-weight: 100;
	right: -72px;
	width: 60px;
	height: 63px;
	justify-content: center !important;
	align-items: center !important;
}

.history-con li {
	position: relative;
}

.descr .left-side-history li::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	background-image: url(/wp-content/themes/techografix/images/chevrons-left.svg);
	background-size: contain;
}

.right-side-history {
	text-align: end;
}

.descr ul li {
	padding: 0;
	position: relative;
	padding: 0 22px;
	font-size: 16px;
	line-height: 20px;
	margin: 0;
	color: var(--primary-color);
}


.descr .right-side-history li::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	background-image: url(/wp-content/themes/techografix/images/chevrons-right.svg);
	background-size: contain;
}

/* shadows */
.history-con li .title::before,
.history-con li .descr::before {
	content: "";
	position: absolute;
	width: 90%;
	height: 0.5rem;
	background: rgba(0, 0, 0, 0.5);
	left: 50%;
	border-radius: 50%;
	filter: blur(4px);
	transform: translate(-50%, 50%);
}

.history-con li .title::before {
	bottom: calc(100% + 0.125rem);
}

.history-con li .descr::before {
	z-index: -1;
	bottom: 0.25rem;
}



.credits {
	margin-top: 1rem;
	text-align: right;
}

.credits a {
	color: var(--color);
}

/* contact page */
.contact-us-con {
	position: relative;
	z-index: -1;
	overflow: hidden;
	min-height: 560px;
	padding: 93px 0 73px 0;
	background-color: var(--primary-color);
}
.get-in-touch-sec{
	padding-top: 40px;
}
section.get-in-touch-sec.contact-get-in-touch {
	overflow: visible;
}

.contact-get-in-touch .get-in-touch-con {
	padding-bottom: 60px;
	padding-top: 30px;
	margin-top: -230px;
}

.map-container {
	line-height: 0;
}

/* get in touch form */
.contact-form {
	padding: 30px 50px 48px 30px;
}

#wpcf7-f54-o1 .wpcf7-form label {
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	color: var(--primary-color);
}

#wpcf7-f54-o1 .wpcf7-form-control-wrap {
	display: block;
}

#wpcf7-f54-o1 .wpcf7-form-control-wrap input,
#wpcf7-f54-o1 .wpcf7-form-control-wrap textarea {
	width: 100%;
	background-color: var(--white-color);
	padding: 14px 16px;
	border: none;
	border-radius: 10px;
	margin: 10px 0 0 0;
	font-size: 16px;
	color: var(--primary-color);
}

#wpcf7-f54-o1 .wpcf7-form-control-wrap input:focus,
#wpcf7-f54-o1 .wpcf7-form-control-wrap textarea:focus {
	outline: none;
}

#wpcf7-f54-o1 .wpcf7-form-control-wrap input::placeholder,
#wpcf7-f54-o1 .wpcf7-form-control-wrap textarea::placeholder {
	color: var(--off-white);
	font-weight: 400;
	font-size: 14px;
}

#wpcf7-f54-o1 span.wpcf7-not-valid-tip {
	font-size: 12px;
}

#wpcf7-f54-o1 .wpcf7-submit {
	font-weight: 500;
	font-size: 16px;
	cursor: pointer;
	letter-spacing: 1px;
	text-transform: uppercase;
	width: 100%;
	padding: 10px 0;
	color: var(--white-color);
	border-radius: 32px;
	background-color: var(--secondary-color);
	border: none;
}

p:empty {
	display: none;
}

.right-banner-image {
	position: relative;
}

.text-slider {
	height: 50px;
	overflow: hidden;
	position: absolute;
	top: calc(15% - 15px);
	left: 50%;
	text-transform: uppercase;
	font-size: 2vw;
	font-weight: 300;
	font-family: var(--font-family);
	transform: translateX(-50%);
}

.text-slider div {
	height: 50px;
	padding: 2px 15px;
	color: #ffffff;
	text-align: center;
	margin-bottom: 50px;
	box-sizing: border-box;
}

.slider-text-1 {
	animation: slide 5s linear infinite;
}

@keyframes slide {
	0% {
		margin-top: -300px;
	}

	5% {
		/* For stopping effect */
		margin-top: -200px;
	}

	33% {
		margin-top: -200px;
	}

	38% {
		/* For stopping effect */
		margin-top: -100px;
	}

	66% {
		margin-top: -100px;
	}

	71% {
		/* For stopping effect */
		margin-top: 0px;
	}

	100% {
		margin-top: 0px;
	}
}

.error-page {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-bottom: 40px;
}
.error-page p{
	margin: 20px 0;
}
.error-page h1{
	color: var(--primary-color);
	font-size: 42px;
	margin-bottom: 20px;
}

/*---------------- responsive ----------------------*/

@media(max-width:1400px) {
	.container {
		padding: 0 20px;
	}

	.main-header {
		padding: 14px 20px;
		width: 100%;
	}
}

@media(max-width:1199px) {
	.banner-left h1 {
		font-size: 66px;
	}

	.banner-right-animation {
		width: 35%;
	}

	.banner-left-animation {
		width: 20%;
	}

	.welcome-left .welcome-subtitle {
		font-size: 33px;
	}

	.what-we-are-content {
		width: 66%;
		margin-bottom: 40px;
	}

	.history-number-left {
		margin-top: -9px;
		margin-left: -48px;
		font-size: 28px;
		width: 51px;
	}

	.history-number-right {
		margin-top: -17px;
		font-size: 28px;
		right: -62px;
		width: 51px;
	}

	.history-con li .date {
		font-size: 20px;
		--dateH: 45px;
	}

	.history-con {
		width: min(810px, 90%);
	}
}

@media(max-width:1023px) {
	.history-con {
		width: min(810px, 85%);
	}
}

@media(max-width:991px) {
	body {
		padding-top: 81px;
	}

	.main-header {
		background-color: var(--white-color);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.header-links {
		display: none;
		flex-direction: column;
		position: fixed;
		top: 0;
		right: 0;
		background-color: white;
		width: 350px;
		max-width: 100%;
		height: 100%;
		box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
		z-index: 1000;
		padding-top: 96px;
		align-items: flex-start;
		justify-content: flex-start;
		padding-left: 30px;
		z-index: 7;
	}

	.header-links li {
		padding-left: 0;
		padding-bottom: 20px;
	}

	.hamburger-icon {
		visibility: visible;
	}

	.header-links.active {
		display: flex;
	}

	.header-logo {
		max-width: 97px;
		height: 48px;
	}

	.banner-sec {
		padding: 71px 0 41px 0;
	}

	.custom-cta {
		font-size: 14px;
		text-transform: uppercase;
		padding: 4px 4px 4px 12px;
	}

	.custom-cta img {
		padding: 12px;
		margin-left: 10px;
	}

	.banner-left {
		gap: 36px;
	}

	.banner-left h1 {
		font-size: 40px;
	}

	.welcome-sec {
		padding: 75px 0 110px 0;
	}

	.welcome-sec h2 {
		font-size: 32px;
	}

	.welcome-left .welcome-subtitle {
		font-size: 22px;
	}

	.welcome-para {
		font-size: 18px;
		line-height: 20px;
		margin: 14px 0 16px 0;
	}

	.svg-scroll-content {
		width: 180px;
	}

	.svg-scroll-container svg {
		width: 100%;
	}

	.welcome-sec-con {
		gap: 69px;
	}

	.what-we-do-sec,
	.our-expertise-sec {
		padding: 50px 0;
	}

	.title-heading {
		font-size: 26px;
	}

	.wwd-right a img {
		width: 28px;
	}

	.wwd-con {
		gap: 54px;
	}

	.accordion-header {
		font-size: 20px;
		padding: 16px 0 18px 0;
	}

	.accordion-content {
		font-size: 14px;
		line-height: 18px;
	}

	.accordion-header {
		font-size: 16px;
		padding: 18px 0 16px 0;
	}

	.accordion {
		margin-top: 18px;
	}

	.accordion-content p {
		margin: 2px 0 16px 0;
		font-size: 14px;
		line-height: 20px;
	}

	.accordion-toggle img {
		width: 25px;
	}

	.why-us {
		padding: 50px 0 40px 0;
	}

	.flex-item {
		width: calc(33% - 12px);
		padding: 0 16px;
	}

	.flex-item p {
		font-size: 18px;
		line-height: 22px;
	}

	.why-us-flex-con {
		gap: 60px 20px;
	}

	.why-us-flex-con {
		margin-top: 56px;
	}

	.grid-con {
		margin-top: 25px;
	}

	.grid-con .grid-item:nth-child(4) img,
	.grid-con .grid-item:nth-child(5) img {
		height: 227px;
		object-fit: cover;
	}

	.get-in-touch-con {
		padding: 25px 0 80px;
	}

	.contact-get-in-touch .get-in-touch-con {
		padding-bottom: 60px;

	}

	.paragraph-text {
		font-size: 14px;
		line-height: 20px;
	}

	.what-we-are-content div p:nth-child(1) {
		margin-bottom: 16px;
	}

	.philosophy-sec,
	.vision-mision {
		padding: 50px 0;
	}

	.vision-con {
		padding-left: 26px;
	}

	.mision-con {
		padding-right: 26px;
	}

	.vision-con img,
	.mision-con img {
		max-width: 299px;
		width: 100%;
	}

	.tabs-con button {
		font-size: 20px;
		line-height: 24px;
	}

	.bg-light {
		padding-top: 30px;
	}

	.tab-container {
		gap: 72px;
		margin-top: -26px;
	}

	.empty-text {
		font-size: 75px;
	}

	.packaging-sec {
		padding: 50px 0;
	}

	.promotional-sec {
		margin-bottom: 70px;
	}

	.tabcontent,
	.pr-tabcontent {
		display: none;
		width: 100%;
		max-width: 400px;
		transition: trasform 0.3s ease;
	}

	.address-text,
	.email-text {
		margin-top: 28px;
		padding-top: 22px;
	}

	.history-con li:nth-child(odd) ul li {
		padding-right: 0;
	}

	.history-con li:nth-child(even) ul li {
		padding-left: 0;

	}

	.contact-detail a {
		font-size: 18px;
	}

	.address {
		font-size: 16px !important;
	}

	.contact-detail,
	.contact-form {
		padding: 36px 21px 106px 21px;
	}

	.footer-links-con {
		width: 56%;
	}

	.contact-us-con {
		min-height: 457px;
		padding: 50px 0 50px 0;
	}
}


@media(max-width:767px) {
	.error-page .icon__download img{
		width: 100%;
	}
	.tabs-con {
		flex-wrap: wrap;
		flex-direction: row;
	}

	.text-slider {
		font-size: 5vw;
	}

	.d-flex {
		flex-direction: column;
		align-items: flex-start;
	}

	.header-links li a {
		font-size: 14px;
		line-height: 18px;
	}

	.header-links li {
		padding-bottom: 18px;
	}

	.banner-left,
	.banner-right,
	.welcome-left,
	.welcome-right,
	.wwd-left,
	.wwd-right {
		width: 100%;
	}

	.banner-left-animation {
		top: -22px;
	}

	.banner-right-animation {
		right: -25px;
		top: -26px;
	}

	.banner-sec-con {
		gap: 50px;
		flex-direction: column-reverse;
	}

	.wwd-left img,
	.welcome-right img,
	.banner-right img {
		max-width: 100%;
	}

	.welcome-right img {
		border-top-left-radius: 45px;
	}

	.welcome-sec-con {
		flex-direction: column-reverse;
	}

	.banner-left {
		gap: 30px;
	}

	.welcome-para {
		font-size: 16px;
		line-height: 18px;
		margin: 14px 0 16px 0;
	}

	.welcome-sec-con {
		gap: 40px;
	}

	.svg-scroll-container {
		display: none;
	}

	.wwd-con {
		gap: 40px;
	}

	.wwd-right div {
		flex-direction: row;
		align-items: center;
		margin-bottom: 10px;
	}

	.flex-item {
		width: calc(50% - 10px);
		padding: 0 16px;
		min-height: 156px;
	}

	.title-heading {
		font-size: 22px;
	}

	.wwd-right a img {
		width: 22px;
	}

	.accordion-toggle img {
		width: 19px;
	}

	.custom-cta {
		font-size: 12px;
		text-transform: uppercase;
		padding: 0px 0px 0px 14px;
	}

	.custom-cta img {
		transform: scale(0.8);
	}

	.banner-left h1 {
		font-size: 32px;
	}

	.scrolldown-btn svg {
		width: 100px;
		height: 100px;
		object-fit: cover;
	}

	.scrolldown-btn {
		margin-top: 10px;
	}

	.welcome-sec {
		padding: 40px 0 50px 0;
		gap: 0;
	}

	.welcome-sec {
		font-size: 28px;
	}

	.welcome-left .welcome-subtitle {
		font-size: 20px;
		margin-top: 2px;
	}

	.welcome-right {
		overflow: hidden;
		margin: 0;
	}

	.flex-item p {
		font-size: 16px;
		line-height: 20px;
	}

	.grid-con {
		gap: 12px;
	}

	.grid-con .grid-item:nth-child(4) img,
	.grid-con .grid-item:nth-child(5) img {
		height: 108px;
	}

	.flex-item img {
		width: 72px;
	}

	.get-in-touch-con {
		padding-bottom: 60px;
	}

	.contact-detail a {
		font-size: 14px;
	}

	.address {
		font-size: 14px !important;
	}

	.history-con li:nth-child(even) .date {
		padding-left: 40px;
		justify-content: flex-start;
	}

	.history-con li:nth-child(even) ul li {
		padding: 0 0 0 22px;
	}

	.right-side-history {
		text-align: start;
	}

	.contact-detail {
		width: 100%;
		border-radius: 0px;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
	}

	.descr .right-side-history li::after {
		top: unset;
		left: 0;
		transform: rotate(180deg) !important;
	}

	.contact-form {
		width: 100%;
		border-radius: 0px;
		border-bottom-right-radius: 12px;
		border-bottom-left-radius: 12px;
		padding: 30px 21px 40px 21px;
	}

	.contact-detail h4,
	.contact-detail a {
		padding-left: 0;
	}

	.get-in-touch-con {
		flex-direction: column;
	}

	.wpcf7 form .wpcf7-response-output {
		text-align: center;
	}

	#wpcf7-f54-o1 .wpcf7-submit {
		font-size: 12px;
	}

	.philosophy-con h3 br {
		display: none;
	}

	.philosophy-con h3 {
		width: 100%;
	}

	.philosophy-paragraphs {
		width: 100%;
	}

	.philosophy-con {
		gap: 25px;
	}

	.tab-container {
		flex-direction: column;
		margin-top: -18px;
		align-items: flex-start;
		gap: 30px;
	}

	.tab-container {
		flex-direction: column;
	}

	.empty-text {
		font-size: 48px;
	}

	.tabs-con button {
		font-size: 16px;
		line-height: normal;
		padding: 8px 14px;
	}

	.promotional-sec {
		margin-bottom: 50px;
	}

	/* infrastructure  */
	.Infrastructure-con img {
		width: 100%;
	}

	.Infrastructure-con {
		gap: 50px;
	}

	.Infrastructure-sec {
		padding: 50px 0;
	}

	.history-con {
		width: min(810px, 80%);
		--col-gap: 2rem;
		--row-gap: 5rem;
		margin-inline: unset;
	}

	.history-con::before {
		grid-row: 1 / span 20;
		top: 32px;
	}

	.history-number-left {
		margin-right: -59px;
		margin-top: -17px;
		margin-left: -23px;
		font-size: 28px;
		width: 48px;
		right: 0;
	}

	.history-number-right {
		margin-top: -17px;
		font-size: 28px;
		right: -59px;
		width: 48px;
	}

	.footer-main-con {
		gap: 34px;
		flex-direction: column;
	}

	.footer-logo-con {
		width: 41%;
	}

	.footer-links-con {
		width: 100%;
	}

	.footer-bottom-link {
		margin-top: 32px;
		flex-direction: row;
	}

	.footer-logo-con .sbscribe-text {
		margin-top: 36px;
	}

	.subscription-con input::placeholder {
		font-size: 14px;
	}

	#wpcf7-f54-o1 .wpcf7-form-control-wrap input,
	#wpcf7-f54-o1 .wpcf7-form-control-wrap textarea {
		padding: 10px 12px;
		border-radius: 8px;
		margin: 5px 0 0 0;
		font-size: 14px;
	}
}

@media(max-width:567px) {

	.philosophy-paragraphs p:nth-child(2),
	.vision-content p,
	.mision-content p {
		margin: 16px 0;
	}

	.vision-con {
		padding-left: 0;
		gap: 0;
	}

	.mision-con {
		padding-right: 0;
		gap: 0;
	}

	.vision-con img,
	.mision-con img {
		max-width: 400px;
	}

	.vision-mision-con {
		gap: 40px;
	}

	.vision-mision-con,
	.what-we-are-content {
		width: 100%;
	}

	.Infrastructure-con {
		gap: 40px;
	}

	.history-con li .date::after {
		width: 10px;
	}

	.history-con::before {
		top: 27px;
	}

	.history-con {
		width: min(810px, 90%);
		--row-gap: 3rem;
	}


	.history-sec {
		padding: 50px 0 50px;
	}

	.history-con::before {
		grid-row: 1 / span 8;
		;
	}

	.history-number-left {
		margin-right: -50px;
		margin-top: -10px;
		font-size: 22px;
		width: 41px;
		right: 0;
		height: 53px;
	}

	.history-number-right {
		margin-top: -10px;
		font-size: 22px;
		right: -50px;
		width: 41px;
		height: 53px;
	}

	.history-con li .descr {
		font-weight: 300;
		padding: 18px 14px;
	}

	.descr ul li {
		font-size: 14px;
		line-height: 18px;
	}

	.history-con li .date {
		font-size: 18px;
		--dateH: 42px;
	}

	.contact-us-con {
		min-height: 276px;
	}

	.contact-get-in-touch .get-in-touch-con {
		margin-top: -158px;
	}

	.footer-links {
		flex-direction: column;
	}

	.footer-logo-con {
		width: 80%;
	}

	.subscription-con .wpcf7-submit {
		top: 5px;
	}

	.subscription-con input::placeholder {
		font-size: 10px;
	}

	.subscription-con button {
		right: 0px;
		top: 4px;
	}

	.subscription-con img {
		width: 23px;
	}

	.subscription-con input:first-child {
		border-radius: 62px;
		border: none;
		width: 100%;
		font-size: 12px;
		color: var(--primary-color);

	}

	.footer-links-con h4 {
		font-size: 16PX;
		line-height: 18pX;
		margin-bottom: 18px;
		text-align: center;
	}

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

	.footer-links ul li a {
		font-size: 14px;
	}

	.footer-main-con {
		gap: 30px;
		align-items: center;
	}

	.footer-logo-con img {
		display: block;
		margin: 0 auto;
		width: 76%;
		max-width: 163px;
		object-fit: cover;
	}

	.footer-links div {
		margin-top: 18px;
	}

	.social-icons a {
		margin-left: 12px;
	}

	.social-icons a img {
		width: 22px;

	}

	.footer-logo-con .sbscribe-text {
		margin-top: 18px;
		text-align: center;
	}

	.footer-bottom-link {
		flex-direction: column;
		text-align: center;
		align-items: center;
	}

	.footer-bottom-link p,
	.footer-bottom-link a {
		font-size: 10px;
		line-height: 18px;
	}

	.footer-links ul {
		text-align: center;
	}

	.footer-links {
		align-items: center;
	}
}

@media(max-width:420px) {
	.history-con {
		width: min(810px, 89%);
	}

	.flex-item {
		width: 100%;
	}
}

@media(max-width:374px) {

	ul.left-side-history li {
		padding-right: 0;
	}

	ul.right-side-history li {
		padding-left: 0;
	}

	.history-con {
		--col-gap: 1rem;
	}

	.history-con li .descr {
		padding: 18px 10px;
	}

	.history-con li {
		--inlineP: 1rem;
	}

	.history-number-left {
		margin-right: -38px;
		margin-top: -3px;
		font-size: 20px;
		width: 30px;
		height: 45px;
	}

	.history-number-right {
		margin-top: -3px;
		font-size: 20px;
		width: 30px;
		height: 45px;
		right: -38px;
	}

	.history-con li .date {
		font-size: 16px;
	}

	.empty-text {
		font-size: 43px;
	}

	.packaging-sec {
		padding: 30px 0;
	}
}

@media(min-width:768px) {
	.history-con {
		grid-template-columns: 1fr var(--line-w) 1fr;
	}

	.history-con::before {
		grid-column: 2;
	}

	.history-con li:nth-child(odd) {
		grid-column: 1;
	}

	.history-con li:nth-child(even) {
		grid-column: 3;
	}

	/* start second card */
	.history-con li:nth-child(2) {
		grid-row: 2/4;
	}

	.history-con li:nth-child(odd) .date::before {
		clip-path: polygon(0 0, 100% 0, 100% 100%);
		left: 0;
	}

	.history-con li:nth-child(odd) .date::after {
		transform: translate(-50%, -50%);
		left: calc(100% + var(--col-gap) + var(--line-w) / 2);
	}

	.history-con li:nth-child(odd) .date {
		border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0;
	}
}