body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr; /* Левая и правая колонки меньше, центральная больше */
            gap: 5px;
            min-height: 90vh;
            /* background-color: #f4f4f4; */
        }
        
        .banner {
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            cursor: pointer; /* Добавляем курсор для интерактивности */
        }
        
        .banner video, .banner img {
            width: 100%;
            height: auto;
            cursor: pointer;
        }
        
        .main-content {
            background-color: #ffffff;
            padding: 50px 20px 20px 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .info-block {
            text-align: center;
            font-size: 1.2em;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        
        .info-block .desktop {
            width: 90%;
            text-align: left;
            font-size: 1em;
            align-items: center;
        }
        
        .info-block table a {
            text-decoration: none;
            color: #0073e6;
        }
        
        .info-block table a:hover {
            text-decoration: underline;
        }
        
        .info-block .phone {
            display: none; /* Раскрыть баннеры на мобильных устройствах */
            font-size: 1.2em;
        }
        
        .file {
            padding: 10px;
            font-family: 'Times New Roman';
        }
        
        .caption {
            text-align: center;
        }
        
        .file pre {
            font-size: 14pt;
        }
        
        .rectangle {
            counter-reset: li;
            list-style: none;
            font-size: 14pt;
            padding: 0;
            text-shadow: 0 1px 0 rgba(255,255,255,.5);
        }
        
        .rectangle a {
            position: relative;
            display: block;
            padding: .4em .8em;
            margin: .5em 0 .5em 2.5em;
            background: #a6d1e5;
            color: #444;
            text-decoration: none;
            transition: all .3s ease-out;
        }
        
        .rectangle a:hover {
            background: #DCDDE1;
        }
        
        .rectangle a:before {
            content: counter(li);
            counter-increment: li;
            position: absolute;
            left: -2.5em;
            top: 50%;
            margin-top: -1em;
            background: #4fa9ca;
            height: 2em;
            width: 2em;
            line-height: 2em;
            text-align: center;
            font-weight: bold;
        }
        
        .rectangle a:after {
            position: absolute;
            content: "";
            border: .5em solid transparent;
            left: -1em;
            top: 50%;
            margin-top: -.5em;
            transition: all .3s ease-out;
        }
        
        .rectangle a:hover:after {
            left: -.5em;
            border-left-color: #4fa9ca;
        }

        .coopButton {
            position: fixed; 
            top: 30px; 
            right: 50px; 
            padding: 10px 20px; 
            background-color: #0073e6; 
            color: white; 
            border: none; 
            border-radius: 5px; 
            cursor: pointer;
        }
        





        @media (max-width: 1500px) {
          .info-block {
              font-size: 1.1em;
          }
        }
        @media (max-width: 1380px) {
          .info-block {
              font-size: 1em;
          }
        }
        @media (max-width: 1270px) {
          .info-block {
              font-size: 0.9em;
          }
        }
        @media (max-width: 1150px) {
          .info-block {
              font-size: 0.8em;
          }
        }
        @media (max-width: 1050px) {
          .info-block {
              font-size: 0.7em;
          }
        }
        
        
        /* Мобильная версия - только центральная колонка */
        @media (max-width: 768px) {
            .grid-container {
                grid-template-columns: 1fr; /* Только центральная колонка */
                gap: 5px; /* Уменьшаем зазор для меньших экранов */
            }

            .banner, .desktop {
                display: none; /* Скрываем баннеры на мобильных устройствах */
            }
        
            .coopButton {
                /* display: none; */
                position: fixed;
                top: auto;
                bottom: 5px;
                left: calc(50% - 70px);
                right: auto
            }
        
            .info-block .phone {
                display: inline-block; /* Показываем контакты на мобильных устройствах */
            }
        
            .main-content {
                grid-column: 1 / -1; /* Центральная колонка занимает всю ширину */
                padding: 10px 10px; /* Меньше отступов для более компактного отображения */
            }
        
            .rectangle a {
                padding: .3em .7em; /* Более компактное расположение ссылок */
                margin: .4em 0 .4em 1.5em; /* Уменьшаем отступы для компактности */
                font-size: 12pt;
            }
        
            .rectangle a:before {
                left: -2em;
                height: 1.8em;
                width: 1.8em;
                line-height: 1.8em;
            }
        
            .info-block {
                font-size: 1em; /* Уменьшаем размер шрифта */
            }
        }
        
        /* Специально для iPhone 6/7/8 и аналогичных размеров (ширина экрана 375px) */
        @media (max-width: 375px) {
        
            .info-block .phone {
                font-size: 1em; /* Немного уменьшаем размер текста */
            }
        
            .rectangle a {
                font-size: 11pt; /* Уменьшаем шрифт для лучшей читаемости на небольших экранах */
                padding: .3em .6em;
            }
        
            .rectangle a:before {
                height: 1.6em;
                width: 1.6em;
                line-height: 1.6em;
            }
        
            .main-content {
                padding: 10px 10px; /* Еще меньше отступов для компактности */
            }
        }
        
        /* Специально для iPhone X/11/12/13/14 Pro и аналогичных (ширина экрана 375px и выше, высота больше 800px) */
        @media (min-height: 800px) and (max-width: 375px) {
        
            .main-content {
                padding: 10px 10px; /* Чуть больше отступов для удобства чтения */
            }
        
            .rectangle a {
                font-size: 13pt; /* Немного увеличиваем размер шрифта для длинных экранов */
            }
        }
        
        /* Специально для iPhone Plus моделей (ширина экрана 414px) */
        @media (max-width: 414px) {
            .main-content {
                padding: 10px 10px;
            }
        
            .rectangle a {
                font-size: 12pt;
            }
        
            .info-block .phone {
                font-size: 1.1em;
            }
        }

        /* Модальное окно */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            position: relative;
            /* background-color: #fefefe; */
            padding: 20px;
            max-width: 700px;
            max-height: 90%;
            /* box-shadow: 0 5px 15px rgba(0,0,0,0.3); */
            overflow: hidden;
        }

        .modal-content img.slide {
            width: 100%;
            height: auto;
        }

        .close {
            position: absolute;
            top: 7px;
            right: 4px;
            color: #000000;
            font-size: 30px;
            font-weight: bold;
            cursor: pointer;
            background-color: #fffffff2;
            width: 33px;
            height: 33px;
            text-align: center;
            border-radius: 50%;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
        }

        .prev, .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            color: white;
            font-weight: bold;
            font-size: 24px;
            transition: 0.3s;
            user-select: none;
        }

        .prev {
            left: 0;
            transform: translate(0, -50%);
            background-color: rgba(0,0,0,0.6);
        }

        .next {
            right: 0;
            transform: translate(0, -50%);
            background-color: rgba(0,0,0,0.6);
        }

        .prev:hover, .next:hover {
            background-color: rgba(0,0,0,0.8);
        }








/* Reset CSS */

/* Модальное окно для формы сотрудничества */
#coopModal {
	display: none; /* Скрыто по умолчанию */
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	/* background-color: rgba(0,0,0,0.8); */
	display: flex;
	justify-content: center;
	align-items: center;
}

#coopModal .modal-content {
	/* background-color: #fefefe; */
	/* background: #DCDDDF url(https://cssdeck.com/uploads/media/items/7/7AF2Qzt.png); */
	padding: 20px;
	max-width: 500px;
	width: 90%;
	/* box-shadow: 0 5px 15px rgba(0,0,0,0.3); */
	border-radius: 10px;
}

#coopModal .modal-content h2 {
	text-align: center;
}

#coopModal .close {
    position: absolute;
    top: 50px;
    right: 35px;
    color: #7E7E7E;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    z-index: 999;
}


h1{ font-size:28px;}
h2{ font-size:26px;}
h3{ font-size:18px;}
h4{ font-size:16px;}
h5{ font-size:14px;}
h6{ font-size:12px;}
h1,h2,h3,h4,h5,h6{ color:#563D64;}
small{ font-size:10px;}
b, strong{ font-weight:bold;}
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }
.left { float:left; }
.right { float:right; }
.alignleft { float: left; margin-right: 15px; }
.alignright { float: right; margin-left: 15px; }
.clearfix:after,
form:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.container { 
	margin: 25px auto; 
	position: relative; 
	/* width: 900px;  */
}
#content {
	background: #f9f9f9;
	background: -moz-linear-gradient(top,  rgba(248,248,248,1) 0%, rgba(249,249,249,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
	background: -o-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
	background: -ms-linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
	background: linear-gradient(top,  rgba(248,248,248,1) 0%,rgba(249,249,249,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#f9f9f9',GradientType=0 );
	-webkit-box-shadow: 0 1px 0 #fff inset;
	-moz-box-shadow: 0 1px 0 #fff inset;
	-ms-box-shadow: 0 1px 0 #fff inset;
	-o-box-shadow: 0 1px 0 #fff inset;
	box-shadow: 0 1px 0 #fff inset;
	border: 1px solid #c4c6ca;
	margin: 0 auto;
	padding: 25px 0 0;
	position: relative;
	text-align: center;
	text-shadow: 0 1px 0 #fff;
	/* width: 400px; */
}
#content h1 {
	color: #7E7E7E;
	font: bold 25px Helvetica, Arial, sans-serif;
	/* letter-spacing: -0.05em; */
	line-height: 20px;
	margin: 10px 0 30px;
}
#content h1:before,
#content h1:after {
	content: "";
	height: 2px;
	position: absolute;
	top: 10px;
	width: 26%;
}
#content h1:after {
	background: rgb(126,126,126);
	background: -moz-linear-gradient(left,  rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(left,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
    right: 0;
}
#content h1:before {
	background: rgb(126,126,126);
	background: -moz-linear-gradient(right,  rgba(126,126,126,1) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(right,  rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
    left: 0;
}
#content form { margin: 0 20px; position: relative }
#content form input[type="text"], #content form input[type="mail"], #content form input[type="phone"], #content form input[type="password"] {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
    -moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
    -ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
    -o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
    box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    /* background: #eae7e7 url(https://cssdeck.com/uploads/media/items/8/8bcLQqF.png) no-repeat; */
    border: 1px solid #c8c8c8;
    color: #777;
    font: 12pt Helvetica, Arial, sans-serif;
    margin: 0 0 10px;
    padding: 12px 10px 12px 10px;
    width: 90%;
}

#content form input[type="text"]:focus,
#content form input[type="password"]:focus {
	-webkit-box-shadow: 0 0 2px #ed1c24 inset;
	-moz-box-shadow: 0 0 2px #ed1c24 inset;
	-ms-box-shadow: 0 0 2px #ed1c24 inset;
	-o-box-shadow: 0 0 2px #ed1c24 inset;
	box-shadow: 0 0 2px #ed1c24 inset;
	background-color: #fff;
	border: 1px solid #ed1c24;
	outline: none;
}
#username { background-position: 10px 10px !important }
#password { background-position: 10px -53px !important }
#content form input[type="submit"] {
    background: rgb(255 255 255);
    background: -moz-linear-gradient(top,  rgba(254,231,154,1) 0%, rgba(254,193,81,1) 100%);
    /* background: -webkit-linear-gradient(top, rgb(132 185 209) 0%, rgb(51 146 186) 100%); */
    background: -o-linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
    background: -ms-linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
    background: linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee79a', endColorstr='#fec151',GradientType=0 );
    /* -webkit-border-radius: 9px; */
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    /* border-radius: 0px; */
    -webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
    -ms-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
    -o-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
    box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
    border: 1px solid #c8c8c8;
    color: #85592e;
    cursor: pointer;
    float: right;
    font: bold 15px Helvetica, Arial, sans-serif;
    height: 35px;
    margin: 12px 12px 19px 15px;
    position: relative;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    width: 120px;
    /* text-align: center; */
}
#content form input[type="submit"]:hover {
	background: rgb(254,193,81);
	background: -moz-linear-gradient(top,  rgba(254,193,81,1) 0%, rgba(254,231,154,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
	background: -o-linear-gradient(top,  rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
	background: -ms-linear-gradient(top,  rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
	background: linear-gradient(top,  rgba(254,193,81,1) 0%,rgba(254,231,154,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec151', endColorstr='#fee79a',GradientType=0 );
}
#content form div a {
	color: #004a80;
    float: right;
    font-size: 12px;
    margin: 30px 15px 0 0;
    text-decoration: underline;
}
.button {
	background: rgb(247,249,250);
	background: -moz-linear-gradient(top,  rgba(247,249,250,1) 0%, rgba(240,240,240,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
	background: -o-linear-gradient(top,  rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
	background: -ms-linear-gradient(top,  rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
	background: linear-gradient(top,  rgba(247,249,250,1) 0%,rgba(240,240,240,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0',GradientType=0 );
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
	-ms-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
	-o-box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	-o-border-radius: 0 0 5px 5px;
	-ms-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
	border-top: 1px solid #CFD5D9;
	padding: 15px 0;
}
.button a {
	/* background: url(https://cssdeck.com/uploads/media/items/8/8bcLQqF.png) 0 -112px no-repeat; */
	color: #7E7E7E;
	font-size: 17px;
	padding: 2px 0 2px 40px;
	text-decoration: none;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.button a:hover {
	background-position: 0 -135px;
	color: #00aeef;
}