.svg {
    /*position: absolute;
    top: 0;
    left: 0;*/
    height: 500px;
    width: 100%;
    transition: transform 3s;
}
.cl3 {
	text-decoration: none;
}
.fil0 {
	fill: #008fb1;
}
.fil1 {
	fill: #007a9b;
}
.fil2 {
	fill: #ff2d54;
}
.fil3 {
	fill: #c81340;
}
.str0 {
	transition: all .4s ease;
	cursor: pointer;
}
.cl3 {
	cursor: pointer;
}
.cl3:hover .str0 {
	fill: #315B9D;
}
.fil-center {
	fill: transparent;
}
.cl3:hover .fil-center {
	fill: #1e3b6624;
}
.tabs {
            display: flex;
            border-bottom: 3px solid #e0e0e0;
            margin-bottom: 30px;
        }

        .tab {
            padding: 15px 30px;
            background: none;
            border: none;
            font-size: 18px;
            font-weight: 500;
            color: #666;
            cursor: pointer;
            position: relative;
            transition: all 0.3s ease;
        }

        .tab.active {
            color: #FF8C42;
            border-bottom: 3px solid #FF8C42;
        }

        .tab:hover {
            color: #FF8C42;
        }

        .filter-section {
            margin-bottom: 30px;
        }

        .filter-select {
            padding: 10px 15px;
            border: 2px solid #ddd;
            background: white;
            font-size: 16px;
			font-weight: 600;
			color: #1e3b66;
            cursor: pointer;
            border-radius: 4px;
            width: 200px;
            transition: all 0.3s ease;
            appearance: none;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6,9 12,15 18,9"></polyline></svg>');
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 16px;
        }

        .filter-select:hover {
            border-color: #FF8C42;
        }

        .filter-select:focus {
            outline: none;
            border-color: #FF8C42;
            box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.1);
        }

        .filter-select option {
            padding: 8px;
            background: white;
            color: #333;
        }

        .filter-select option:hover {
            background-color: #f8f9fa;
        }

        .content {
            display: none;
        }

        .content.active {
            display: block;
        }

        .cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
        }

        .card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        }

        .card-image {
            width: 100%;
            height: 200px;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .card-content {
            padding: 20px;
        }

        .card-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
            line-height: 1.4;
        }

        .card-description {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
        }

        /* Стили для разных типов изображений */
        .brain-pattern {
            background: linear-gradient(135deg, #FF8A9B 0%, #D67E8A 100%);
            position: relative;
        }

        .brain-pattern::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 20c-8 0-15 3-20 8-3 3-5 7-5 12 0 3 1 6 3 8 2 2 5 3 8 3h28c3 0 6-1 8-3 2-2 3-5 3-8 0-5-2-9-5-12-5-5-12-8-20-8z" fill="white" opacity="0.3"/><circle cx="35" cy="45" r="3" fill="white"/><circle cx="65" cy="45" r="3" fill="white"/><path d="M40 60c5 3 10 3 15 0" stroke="white" stroke-width="2" fill="none"/></svg>') no-repeat center;
            background-size: contain;
        }

        .architecture-pattern {
            background: linear-gradient(135deg, #FFD93D 0%, #F2C744 100%);
            position: relative;
        }

        .architecture-pattern::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 120px;
            height: 80px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 80"><rect x="10" y="50" width="100" height="20" fill="white" opacity="0.4"/><rect x="30" y="30" width="60" height="30" fill="white" opacity="0.3"/><rect x="45" y="10" width="30" height="30" fill="white" opacity="0.3"/><circle cx="60" cy="20" r="8" fill="white" opacity="0.5"/></svg>') no-repeat center;
            background-size: contain;
        }

        .globe-pattern {
            background: linear-gradient(135deg, #84A9D9 0%, #6B8BB3 100%);
            position: relative;
        }

        .globe-pattern::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><circle cx="40" cy="40" r="35" fill="none" stroke="white" stroke-width="2" opacity="0.4"/><path d="M10 40 L70 40 M40 10 L40 70" stroke="white" stroke-width="1.5" opacity="0.3"/><ellipse cx="40" cy="40" rx="35" ry="15" fill="none" stroke="white" stroke-width="1" opacity="0.3"/></svg>') no-repeat center;
            background-size: contain;
        }

        .typewriter-pattern {
            background: linear-gradient(135deg, #A8E6CF 0%, #88C999 100%);
            position: relative;
        }

        .typewriter-pattern::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 70px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 70"><rect x="10" y="20" width="80" height="40" rx="5" fill="white" opacity="0.4"/><rect x="15" y="10" width="70" height="15" rx="2" fill="white" opacity="0.3"/><circle cx="25" cy="35" r="2" fill="white"/><circle cx="35" cy="35" r="2" fill="white"/><circle cx="45" cy="35" r="2" fill="white"/></svg>') no-repeat center;
            background-size: contain;
        }
		
		
		
		
		.service-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 9px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            position: relative;
			border-bottom: 1px solid #666;
			border-top: 1px solid #666;
        }

        .service-item:hover {
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }

        .service-content {
            flex: 1;
            padding-right: 40px;
			max-width: 800px;
        }

        .service-title {
            font-size: 24px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 20px;
            line-height: 1.2;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .service-description {
            font-size: 16px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 0;
        }

        .service-image {
			width: 250px;
			height: 150px;
			border-radius: 8px;
			overflow: hidden;
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
			background-size: cover;
			background-position: center;
			left: -140px;
		}

        .arrow-link {
			position: absolute;
			top: -15px;
			right: 20px;
			color: #3fc1f9;
			font-size: 60px;
			text-decoration: none;
			transition: color 0.3s ease;
		}

        .arrow-link:hover {
            color: #333;
        }
		
		.service-a {
			text-decoration: none;
		}
		
		.service-a:hover .arrow-link {
            color: #1e3b66;
        }
		
		.service-item:hover .more-info{
			color: #333;
		}

        .more-info {
			font-weight: 800;
            position: absolute;
            bottom: 20px;
            right: 20px;
            color: #999;
            font-size: 14px;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: color 0.3s ease;
        }

        .more-info:hover {
            color: #333;
        }

        /* Стили для конкретных изображений */
        .coworking-individual {
            background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
            position: relative;
			
        }

        .coworking-individual::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 80px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80"><rect x="20" y="30" width="60" height="35" rx="5" fill="white" opacity="0.3"/><rect x="30" y="20" width="15" height="25" fill="white" opacity="0.4"/><rect x="55" y="20" width="15" height="25" fill="white" opacity="0.4"/><circle cx="50" cy="45" r="8" fill="white" opacity="0.5"/></svg>') no-repeat center;
            background-size: contain;
        }

        .coworking-open {
            background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
            position: relative;
        }

        .coworking-open::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 120px;
            height: 80px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 80"><rect x="10" y="25" width="100" height="40" rx="8" fill="white" opacity="0.3"/><rect x="20" y="15" width="25" height="35" fill="white" opacity="0.4"/><rect x="55" y="15" width="25" height="35" fill="white" opacity="0.4"/><rect x="90" y="15" width="20" height="35" fill="white" opacity="0.4"/></svg>') no-repeat center;
            background-size: contain;
        }

        .mediateka {
            background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%);
            position: relative;
        }

        .mediateka::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 80px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80"><rect x="25" y="20" width="50" height="35" rx="5" fill="white" opacity="0.4"/><rect x="30" y="25" width="40" height="25" fill="white" opacity="0.2"/><circle cx="40" cy="40" r="3" fill="white"/><circle cx="50" cy="40" r="3" fill="white"/><circle cx="60" cy="40" r="3" fill="white"/></svg>') no-repeat center;
            background-size: contain;
        }
		
		.cardh img {
			width: 100% !important;
		}
		
		.book-coverh {
			height: 210px;
			display: flex		;
			overflow: hidden;
			justify-content: center;
			flex-direction: column;
		}
		
		.cardh {
			border: 1px solid #99999980;
			border-radius: 8px;
			background: #fff;
		}

.book-infoh {
    padding: 15px;
}

.book-titleh {
    font-size: 19px;
    font-weight: 600;
	margin-bottom: 5px;
}

.mis-img {
	width: 100%;
	border-radius: 8px;
}

.img {
	width: 100%;
}

.img-r {
	border-radius: 8px;
}

a.test-btn {
    border: 1px solid #315b9d;
    padding: 15px 35px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 20px;
    color: #315b9d;
	background: #fff;
	transition: all .4s ease;
}
a.test-btn:hover {
    box-shadow: 0 0 12px #55555545;
    /*transform: scale(1.02);*/
}
.df {
	display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
.img-ico {
	width: 100px;
	margin: 0 auto;
	margin-top: 10px;
}
.ico-img-div {
	text-align: center;
}
img.dost-ico-img {
    width: 100%;
	border-radius: 8px;
}
.div-ico-r {
    width: 100px;
    height: 100px;
    border: 1px solid #999;
    border-radius: 8px;
    margin: 10px;
	position: relative;
}
.ico-info {
    position: absolute;
    top: -55px;
    flex-direction: column;
    justify-content: center;
    display: flex;
    left: -50px;
    text-align: center;
    width: 200px;
    height: 55px;
    background: #fff;
    padding: 5px 10px;
    border: 1px solid #9999995e;
    opacity: 0;
    z-index: -1;
    transition: all .3s ease;
}
.div-ico-r:hover .ico-info {
	opacity: 1;
    z-index: 9;
}
.div-ico-dost {
    display: flex;
}
.dost-col-b {
    display: flex;
    justify-content: end;
    flex-direction: column;
}

        @media (max-width: 768px) {
            .service-item {
                flex-direction: column;
                text-align: center;
                padding: 30px 20px;
            }

            .service-content {
                padding-right: 0;
                margin-bottom: 30px;
            }

            .service-title {
                font-size: 24px;
            }

            .service-image {
                width: 100%;
                max-width: 300px;
                height: 160px;
            }

            .arrow-link {
                top: 15px;
                right: 15px;
            }

            .more-info {
                position: static;
                margin-top: 20px;
                display: block;
            }
        }
		
.reader {
	width: fit-content;
	max-height: 150px;
}
.card-body-reader {
	text-align: center;
}
.none-underline {
	text-decoration: none;
}
.card-abc {
	margin-bottom: 20px;
}