/* For iPads and Tablets- Portrait */
@media screen and (min-width: 435px) and (max-width: 884px) {
	.container {
		padding-left: var(--size-15);
		padding-right: var(--size-15);
	}
	[aria-controls="navbarDropdown"] {
		display: block;
	}

	[aria-expanded="false"] ~ .navbar-nav {
		display: none;
	}

	[aria-expanded="true"] ~ .navbar-nav {
		display: block;
		position: absolute;
		right: 0;
		top: var(--size-50);
		width: 100%;
		background-image: linear-gradient(
			to right,
			transparent,
			rgba(255, 255, 255, 0.7)
		);
		box-shadow: 0px 0px var(--size-20) rgba(59, 56, 80, 0.1);
		text-align: right;
	}
	[aria-expanded="true"] ~ .navbar-nav li a {
		margin-right: var(--size-20);
		color: var(--font-color-dark);
		font-size: var(--size-15);
	}
	.navbar-nav li a:hover {
		color: var(--gold-color);
	}
	.company-info {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		padding-top: var(--size-50);
		padding-bottom: var(--size-50);
		gap: var(--size-50);
	}
	.company-info .news-letter {
		display: block;
		max-width: 400px;
		margin: var(--size-15) auto;
	}
	.subscribe input {
		width: 100%;
		height: 34px;
		padding: var(--size-5) var(--size-10);
		border: none;
		background-color: #e1e5e6;
	}
	.subscribe .send-btn {
		width: var(--size-60);
		height: 34px;
		padding: 0;
		overflow: hidden;
		transition: all 0.2s ease-in-out;
		position: absolute;
		right: 0;
		background-color: var(--dark-color);
	}
	.form .flex {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--size-20);
	}
}

/* For mobile phones- Portrait */
@media screen and (max-width: 430px) {
	h2,
	h3,
	h4 {
		font-size: var(--size-20);
	}
	.content p {
		font-size: var(--size-16);
	}
	.container {
		padding-left: var(--size-15);
		padding-right: var(--size-15);
	}
	.icon-wrapper .icon {
		padding-left: var(--size-10);
		padding-right: var(--size-10);
		padding-top: var(--size-5);
		padding-bottom: var(--size-5);
		border-right: 1px solid rgba(255, 255, 255, 0.5);
		font-size: 0.8rem;
	}
	.icon-wrapper .disable {
		display: none;
	}
	[aria-controls="navbarDropdown"] {
		display: block;
	}
	[aria-expanded="false"] ~ .navbar-nav {
		display: none;
	}
	[aria-expanded="true"] ~ .navbar-nav {
		display: block;
		position: absolute;
		right: 0;
		top: var(--size-100);
		width: 100%;
		background-image: linear-gradient(
			to right,
			transparent,
			rgba(255, 255, 255, 0.7)
		);
		box-shadow: 0px 0px var(--size-20) rgba(59, 56, 80, 0.1);
		text-align: right;
	}
	[aria-expanded="true"] ~ .navbar-nav li a {
		margin-right: var(--size-20);
		color: var(--dark-color);
		font-size: var(--size-15);
	}
	.navbar-nav li a:hover {
		color: var(--gold-color);
	}
	.overlay .overlay-info {
		margin: 150px auto 0;
	}
	.overlay-info h3 {
		font-size: var(--size-10);
		color: var(--gold-color);
	}
	.overlay-info h1 {
		text-transform: uppercase;
		font-size: 1.1875rem;
		margin-top: 0;
		margin-bottom: 5px;
		letter-spacing: 0;
		line-height: 1.3;
	}
	/* who are we section  */
	.who-are-we {
		padding-bottom: var(--size-50);
	}
	.who-are-we .who-are-we-wrapper.flex {
		gap: var(--size-150);
		flex-wrap: wrap;
	}
	.who-are-we-wrapper > div {
		flex: auto;
	}
	.who-are-we-wrapper .content {
		color: var(--dark-color);
		padding: var(--size-5);
		text-align: center;
	}
	/* why us section  */
	.why-us-grid .card {
		text-align: center;
		padding: var(--size-5) var(--size-25);
	}
	.card .line {
		margin: auto;
	}
	/* products section */
	.product {
		padding-top: var(--size-5);
	}
	.product-wrapper .product-detail:hover {
		background-color: transparent;
		box-shadow: 0px 0px 0px 0px;
		transform: scale(1);
	}
	.product-detail .detail-content a {
		display: none;
	}
	/* partnership section  */
	.partnership {
		display: none;
	}
	.wrapper-info .line {
		display: block;
		width: var(--size-50);
		height: 2px;
		background-color: var(--gold-color);
		margin: 5px auto;
	}
	/* consultation section  */
	.request-engineer-wrapper .overlay {
		background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
		padding-left: 5px;
		padding-right: 5px;
		backdrop-filter: blur(3px);
	}
	.flex {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 30px;
	}
	.flex .text {
		margin: auto;
		color: var(--white-color);
		text-align: center;
	}
	.text h2 {
		text-transform: capitalize;
		font-size: 19px;
		font-weight: 600;
		margin-top: 0;
		margin-bottom: 0;
	}
	/* footer section  */
	.company-info {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		padding-top: var(--size-50);
		padding-bottom: var(--size-50);
		margin: var(--size-30);
		gap: var(--size-30);
	}
	.company-info .address {
		display: block;
		max-width: 300px;
		margin: auto;
	}
	.company-info .news-letter {
		display: block;
		max-width: 300px;
		margin: auto;
	}
	.subscribe input {
		width: 100%;
		height: 34px;
		padding: var(--size-5) var(--size-10);
		border: none;
		background-color: #e1e5e6;
	}
	.subscribe .send-btn {
		width: var(--size-60);
		height: 34px;
		padding: 0;
		overflow: hidden;
		transition: all 0.2s ease-in-out;
		position: absolute;
		right: 0;
		background-color: var(--dark-color);
	}
	/* contact section  */
	.contact-wrapper .upper-info {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: var(--size-30);
	}
	.form .flex {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}
}