@media (min-width: 0px) {

	.company {
		padding-top: 40px;
		padding-bottom: 40px; 
	}

	.company__main h2 {
		margin-top: 10px;
		font-size: 24px;
		line-height: 120%;
		text-transform: uppercase;
	}

	.company__main-description {
		margin-top: 15px;
		font-family: "Gotham Pro";
		font-size: 14px;
		line-height: 150%;
	}


	.company__list {
		margin: 40px 0 0 0;
		max-width: 100%;
		gap: 24px;
	}

	.company__tutor {
		width: 288px;
		height: 410px;

	}

	.company__info {
		padding: 16px;
		width: 256px;
		height: 176px;
		background: rgba(107, 114, 128, 0.5);
		backdrop-filter: blur(24px);
		border-radius: 16px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}


	.company-point {
		width: 288px;
		height: 410px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		border-radius: 16px;
		padding: 75px 16px 16px 16px;
		position: relative;
	}

	.company-point__description {
		font-size: 14px;
		line-height: 150%;
		font-family: "Gotham Pro";
		color: #E5E7EB;
	}

	.company-point__name {
		font-size: 18px;
		margin-top: 5px;
		color: #F3F4F6;
		text-transform: uppercase;

	}

	.company__details {
		border: 1px solid #FAD1CE;
		padding: 12px 0;
		color: #FAD1CE;
		font-size: 16px;
		text-align: center;
		width: 80%;
		border-radius: 40px;
		margin-top: 32px;
		display: block;
		background: transparent;
	}


	.company__list {
		display: flex;
		overflow-x: scroll;
		max-width: 100%;
		padding: 0 0 15px 0;
	}

	.company-point:nth-of-type(1) {
		background-image: url("../img/vm.webp");

		background-size: cover;
		background-position-x: center;
	}

	.company-point:nth-child(2) {
		background-image: url("../img/km.webp");
		background-size: cover;
		background-position-x: center;
	}

	.company-point:nth-child(3) {
		background-image: url("../img/ik.webp");
		background-size: cover;
		background-position-x: center;
	}

	.company-point:nth-child(4) {
		background-image: url("../img/vs.webp");
		background-size: cover;
		background-position-x: center;
	}



	.company-modal-overlay {
		position: fixed;
		left: 0;
		top: 0;
		background-color: #1F262D;
		display: flex;
		justify-content: center;
		height: 100%;
		width: 100%;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease-in-out;
		padding-top: 40px;
		padding-bottom: 40px;
		overflow-y: scroll;
		margin-top: 20px;
		border-radius: 20px;
	}

	.company-modals {
		position: relative;
	}

	.company-modal {
		background-color: #fff;
		width: 86%;
		height: fit-content;
		display: flex;
		align-items: center;
		justify-content: center;
		display: none;
	}

	.company-modal-overlay--visible {
		opacity: 1;
		visibility: visible;
		transition: all 0.3s ease-in-out;
	}

	.company-modal--visible {
		display: block;
	}

	.company-popup__content {
		background-color: #1F262D;
		color: #fff;
		max-width: 800px;
		padding: 1px;
		z-index: 999;
	}

	.company-modal img {
		width: 100%;
	}

	.company-popup__tittle {
		font-size: 14px;
		margin-bottom: 20px;
		text-align: center;
	}

	.company-popup__name {
		font-size: 32px;
		text-align: center;
		color: #ffffff;
		margin-top: 15px;
	}

	.company-popup__text {
		margin-top: 20px;
		color: #ffffff;
		font-size: 18px;
		margin-top: 15px;
		line-height: 150%;
	}


	.company-popup__close {
		position: fixed;
		right: 10px;
		top: 30px;
		font-size: 20px;
		color: #fff;
		z-index: 777;
		cursor: pointer;
	}

	.company-popup__close svg {
		width: 20px;
		height: 20px;
		fill: #ffffff;
	}






}

@media (min-width: 639px) {
	.company__main-description {
		max-width: 80%;
	}

	.company-modal {
		width: 500px;
	}
}

@media (min-width: 958px) {
	.company__main h2 {
		font-size: 32px;
	}

	.company__main-description {
		font-size: 18px;
	}

}

@media (min-width: 1244px) {
	.company__main h2 {
		font-size: 36px;
	}

	.company {
		padding-top: 128px;
		padding-bottom: 128px;
	}

	.company__info {
		height: 100px;
		transition: height .5s ease-out;
		display: block;
	}

	.company__info:hover {
		height: 176px;
		transition: 0.5s;
	}

	.company__details {
		display: none;
	}

	.company__info:hover .company__details {
		display: block;
	}

	.company__main-description {
		font-size: 20px;
		max-width: 70%;
	}

	.company__list {
		gap: 24px;
	}
}