/* Responsive CSS file styles defined for smaller width devices */
/* CSS for tablet devices */

/* @media screen and (min-width: 576px) and (max-width: 820px) {  */
@media screen and (min-width: 576px) and (max-width: 820px) {
	.logo {
		padding: 0 3rem;
	}

	.hamburger {
		display: block;
		padding: 0 3rem;
	}

	.menu {
		position: absolute;
		right: 0;
		padding: 0 3rem;
		top: 115px;
		background: #19988b;
		/* background-image: linear-gradient(180deg, #74D7BB, #53C8B6, #35A99C); */
		display: none;
		transition: all 0.25s;
	}

	.menu .menu-list {
		flex-direction: column;
	}

	.slider {
		
		height: 87vh;
		min-height: 500px;
		overflow: hidden;
		margin-top: 2.5rem;
	}

	.about {
		flex-direction: column;
	}

	.about .about-text {
		padding: 2rem;
	}

	.about .about-image img {
		padding: 2rem;
	}

	.product {
		flex-direction: column;
	}

	.product .product-text {
		padding: 2rem;
	}

	.product .product-image img {
		padding: 2rem;
	}

	.services {
		padding: 0;
	}

	.my-row {
		gap: 10px;
	}

	.feature-row {
		gap: 10px;
	}

	.my-row .my-col {
		text-align: center;
		width: 35%;
	}

	.arrows {
		right: 60%;
	}

	.counter {
		flex-direction: column;
	}

	.feature {
		flex-direction: column;
	}

	.dealer {

		flex-direction: column;
		/* display: flex;
		align-items: center;
		justify-content: space-evenly;
		flex-direction: column; */
		text-align: center;
	}

	.dealer p {
		text-align: center;
	}

	.test {

		display: block;
	}

	.dealer h2 {
		text-align: center;
	}

	.container {
		margin: 0px;
		padding-top: 10px;
		padding-bottom: 10px;
		min-width: 576px;
		height: 250px;
		/* background-color: #fff; */
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		/* border-radius: 3px; */
		column-gap: 10px;
		/* box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; */
	}
}

/* hamburger menubar */

@media screen and (min-width: 856px) and (max-width: 1024px) {
	.menu-list .menu-list-items {
		padding: 0.5rem 0.3rem;
	}
}

/* Slider */


@media (max-width: 900px) {
	.slider {
		width: 100%;
		height: 80vh;

	}

	.slider .slide .info {
		position: relative;
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (max-width: 500px) {
	.slider .slide .info h2 {
		font-size: 1.8em;
		line-height: 40px;
	}

	.slider .slide .info p {
		font-size: 0.9em;
	}
}

/* CSS for mobile devices */
@media screen and (min-width: 280px) and (max-width: 576px) {

	.hamburger {
		display: block;
		margin-right: 20px;
		padding: 0 2rem;

	}

	.hero {
		justify-content: center;
		/* color: #fff;  */
		/* background-image: radial-gradient(circle, rgb(15 14 14 / 30%), rgb(102 96 96 / 40%), rgb(163 160 160 / 16%)), url('./Images/heroImg3.avif')  */
	}

	.slider {
		
		height: 82vh;
		min-height: 500px;
		overflow: hidden;
		margin-top: 2.5rem;
	}

	.sub-heading {
		color: #fff9f9cc;
	}

	/* .hero .intro-buttons { 
		gap: 20px; 
	}  */

	.btn {
		padding: 10px 30px;
	}

	.logo {
		padding: 0 2rem;

	}

	/* .navbar {
		position: fixed;
	} */

	.menu {
		position: absolute;
		right: 0;
		padding: 0 2rem;
		top: 115px;
		background: #19988b;
		/* color: white; */
		/* background-image: linear-gradient(180deg, #35A99C, #53C8B6, #74D7BB); */
		display: none;
		transition: all 0.25s;
	}

	.menu .menu-list {
		flex-direction: column;
	}

	/* .navigation {
		top: 10px;
	} */

	.portfolio {
		padding: 0;
	}

	.about {
		flex-direction: column;
		/* width: 100%; */
	}

	.about .about-text {
		width: 90%;
		padding: 1rem;
		text-align: justify;
	}

	.about-text {
		width: 90%;
		padding: 1rem;
	}

	.dealer {
		width: 90%;
		padding: 1rem;
	}

	.about .about-image img {
		width: 90%;
		padding: 1rem;
	}

	.product {
		flex-direction: column;
		/* width: 100%; */
	}

	.product .product-text {
		width: 90%;
		padding: 1rem;
		text-align: justify;
	}

	.product .product-image img {
		width: 90%;
		padding: 1rem;
	}

	.manifacturing {
		flex-direction: column;
	}

	.manifacturing .manifacturing-text {
		width: 90%;
		padding: 1rem;
		text-align: justify;
	}

	.technology {
		width: 90%;
		padding: 1rem;
		margin: 0;
	}

	.manifacturing .manifacturing-image {
		width: 90% !important;
		padding: 10px !important;
	}

	.manifacturing .manifacturing-image img {
		width: 90% !important;
		padding: 1rem;
	}

	.services {
		padding: 0;
	}

	.services p {
		width: 90%;
		padding: 1rem;
		text-align: justify;
	}

	/* .manifacturing-text p{
		width: 90%;
		padding: 1rem;
		text-align: center;
	}
	.manifacturing-text h1{
		width: 90%;
		padding: 1rem;
		text-align: center;
	} */

	.my-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		margin: 2rem 0;
		gap: 1rem;
	}

	.feature-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		margin: 2rem 0;
		gap: 1rem;
	}

	.my-row .my-col {
		text-align: center;
		width: 100%;
	}

	.contact {
		padding: 0;
	}

	.contact-content {
		flex-direction: column;
		align-items: center;
		gap: 2rem;
	}

	.contact-form-container {
		width: 80%;
	}

	.contact-form .form-controls {
		width: 100%;
	}

	.contact-form .form-btn {
		width: 100%;
	}

	.contact-details {
		width: 80%;
	}

	/* .social-links {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
	} */

	.footer-menu {
		padding: 0 2rem;

	}

	.footer-list-items {
		align-items: center;
		margin: 10px;

	}

	.counter {
		/* display: flex;
		align-items: center;
		justify-content: space-evenly; */
		flex-direction: column;
	}

	.feature {
		flex-direction: column;
	}

	.dealer {
		/* display: flex;
		align-items: center;
		justify-content: space-evenly; */
		flex-direction: column;
		text-align: center;
	}

	.dealer p {
		text-align: center;
	}

	.dealer h2 {
		text-align: center;
	}

	.test {

		display: block;
	}

	.container {
		margin: 0px;
		padding-top: 10px;
		padding-bottom: 10px;
		min-width: 280px;
		height: 250px;
		/* background-color: #fff; */
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		/* border-radius: 3px; */
		column-gap: 10px;
		/* box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; */
	}
}