body {
	background: #FFF;
	margin: 0 auto;
	color: #000;
	font-family: "";
	font-size: 18px;	
	display: flex; 
	flex-direction: column; 
	height: 100%; 
	height: -webkit-fill-available;

}


* {
	margin: 0;
   	padding: 0;	
 	box-sizing: border-box;
	font-family: "Arial"

}


#intobaner1 {
	margin-left: 0px;
	width: 100%;
	height: 45px;
	background: #fff;
}

#intobaner2 {
	width:100%;
	background-color: #ffffff;
	height:40px;
}


#name {
	margin-left:10%;
	width: 270px;
	float: left;
	height: 40px;
}
#name h2{font-size: 24px;}
#name2 {display: none;}




#infobaner {
	width: 40%;
	margin-right:10%;
	float: right;
	height: 40px;
	background-color: #fff;
	text-align: right;
}



#menu {
	width: 80%;
	background-color: #fff;
	height: 40px;
	margin-left:10%;

}


#sticky {
    background-color: #Fff;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
	z-index: 1;
	

}

#menu nav {
	text-align: center;
	
}

#menu nav ul {
	display: inline-block;

}

#menu nav ul li a {
    display: inline-block;
    margin-top: 21px;
    color: #000;
	font-weight:normal;
    font-size: 20px;
    text-decoration: none;
    letter-spacing: 0.0em;
	margin-left: 12px;
	margin-right:12px;
	font-size: 15px;
}
#menu nav ul li a:hover, nav ul li a:focus {
    color: #787575;
}

.catalogmob {display: none;}


#wr {
	scroll-margin-top: 135px;
	background: #FFF;
	width: 100%;
	height: 100%;
			
}


.imgslider {	
	width: 88%;
	margin-left: 6%;
	margin-right: 6%;
	align: center;
}

#wr2 {
	scroll-margin-top: 135px;
	background: #FFF;
	margin-left: 10%;
	width: 80%;
	height: 80%;
	text-align: center;
			
}

#all {
	width:80%;
	margin-left: 10%;
	

}



#about {
	width: 100%;
	height:auto;
	background: #fff;
	height:auto;
	margin-bottom: 20px;

}


#about1 {
	scroll-margin-top: 50px;
	text-align: left;
	margin-top: 20px;
	margin-right:20px;
	position: relative;
	background-color: #fff;
	font-size: 15px;
}

#about1 p{
	margin-left:10px;
	margin-right:10px;
}



.catalogtext {
	
	width: 100%;
	margin-left:10px;
	border: 1px solid #dddddd;
	border-collapse: collapse; 
	font-size: 16px;
	
}
.catalogtext tr {
	background: #f7f5f5;
	border: 1px solid #dddddd;
	padding: 4px;
}
.catalogtext td {
	border: 1px solid #dddddd;
	padding:4px;
}


.catalogtext nav{
	scroll-margin-top:135px;
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: -4px;
	float:inline-start;
	box-sizing: border-box;
	z-index: 0;
	
	
}

.catalogtext nav ul li a {
	font-size: 15px;
    color: #000;
    text-decoration: none;
	letter-spacing: 0.0em;
    
}
.catalogtext nav ul li a:hover, nav ul li a:focus {
    color: #5f4040;
}



.text-block {
	margin-top: 20px;
	margin-left:-0px;
	margin-bottom:0px;
	font-weight: normal;
}

#otdelka {
	height: auto;
}

#otdelkavnutimg {
	padding: 15%;
	height:auto;
	width: 50%;
	float: left;
	background: #F1F1F1;	
}

#otdelkavnut {
	width: 50%;
	float: right;
}

#otdelkavneshimg {
	padding: 15%;
	height:auto;
	width: 50%;
	float: left;
	background: #F1F1F1;	
}

#otdelkavnesh {
	width: 50%;
	float: right;
}

.table-container {
            max-width: 1000px;
            margin: 0 auto;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        table {
            width: 100%;
            border-collapse: collapse;
			table-layout: fixed;
        }

        th {
            background-color: #3d3d3d;
            color: white;
            padding: 25px 15px;
            text-align: center;
            font-size: clamp(18px, 4vw, 20px);
            font-weight: bold;
            line-height: 1.3;
        }

        .subtitle {
            background-color: #525252;
            color: white;
            padding: 20px 15px;
            font-size: clamp(12px, 2.5vw, 16px);
            line-height: 1.5;
            text-align: center;
        }

        td {
            padding: 25px 15px;
            border: 1px solid #ddd;
            vertical-align: top;
            text-align: center;
			width: 50%;
        }

        .image-cell {
            background-color: #ecf0f1;
            transition: all 0.3s ease;
        }

        .image-cell:hover {
            background-color: #dfe6e9;
        }

        .image-container {
            width: 100%;
            max-width: 100%;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .image-placeholder {
            width: 100%;
            max-width: 100%;
            height: auto;
            aspect-ratio: 1 / 1;
            background-color: #bdc3c7;
            border: 2px dashed #7f8c8d;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #7f8c8d;
            font-size: clamp(14px, 3vw, 18px);
            margin: 0 auto;
            border-radius: 6px;
            transition: all 0.3s ease;
            overflow: hidden;
        }

        
        .real-image {
            width: 50%;
            max-width: 50%;
            height: auto;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            border-radius: 6px;
            border: 2px solid #7f8c8d;
        }

        .image-placeholder:hover {
            background-color: #a4b0be;
            border-color: #636e72;
            color: #2d3436;
        }

        .note {
            font-size: clamp(10px, 2vw, 14px);
            color: #666;
            font-style: italic;
            margin-top: 15px;
            text-align: center;
            width: 100%;
        }

        
        @media (max-width: 768px) {
            body {
                margin: 10px;
            }
            
            th {
                padding: 20px 10px;
            }
            
            .subtitle {
                padding: 15px 10px;
            }
            
            td {
                padding: 20px 10px;
            }
            
            .image-placeholder {
                max-width: 100%;
            }
        }

        
        @media (max-width: 480px) {
            body {
                margin: 5px;
            }
            
            .table-container {
                border-radius: 6px;
            }
            
            th {
                padding: 15px 8px;
                font-size: 16px;
            }
            
            .subtitle {
                padding: 12px 8px;
                font-size: 11px;
            }
            
            td {
                padding: 15px 8px;
                display: block;
                width: 100% !important;
            }
            
            
            table, thead, tbody, tr {
                display: block;
            }
            
            tr {
                margin-bottom: 0;
            }
            
            .image-placeholder {
                max-width: 100%;
                height: auto;
                aspect-ratio: 1 / 1;
                font-size: 14px;
            }
            
            .note {
                font-size: 11px;
                margin-top: 10px;
            }
        }

        
        @media (max-width: 320px) {
            th {
                padding: 12px 5px;
                font-size: 14px;
            }
            
            .subtitle {
                padding: 10px 5px;
                font-size: 10px;
            }
            
            td {
                padding: 12px 5px;
            }
            
            .image-placeholder {
                max-width: 100%;
                font-size: 12px;
            }
        }

        
        @media (max-height: 500px) and (orientation: landscape) {
            .image-placeholder {
                aspect-ratio: 16 / 9;
            }
            
            th, .subtitle, td {
                padding: 12px 8px;
            }
        }


#dostavka {
	height: auto;
	font-size: 15px;
	margin-bottom: 50px;
	scroll-margin-top: 50px;
	
}

#contacts {
	width: 100%;
	height: auto;
	margin-bottom: 0px;
	background: #FFF;
	scroll-margin-top: 135px;
	
}



#card {
	width: 60%;
	height: 400px;
	background: #1a1919;
	float:left;

}
#infa {
	width: 40%;
	height: 400px;
	background: #1a1919;
	float:right;
}

#infa p{
	margin-left: 30px;
}

.dopinfa {
	display:inline-flexbox;
	text-align: left;
	margin-left: 10px;

}

main {
	min-height:100%;
	position: relative;
}
footer {
	height:50px;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: #1a1919;
}



#about2 {
	width: 100%;
}

#about2 h1{
	margin-bottom: 30px;margin-left:10px;margin-top:15px;
}



.aboutpic {
	padding: 25%;
	width: 50%;
	float: left;
	height: 200px;
	background: #f4f4f4;	
}


.pic {
	margin: 0 auto;
	width: 100%;
	background: #f4f4f4;	
}

#abouttext {
	width: 50%;
	float: right;
	background: #f4f4f4;
}


.text-block {
	margin-left:20px;
	font-weight: normal;
	font-size: 17px;
	margin-right: 10px;
}

.hamburger-menu {display: none;}


.btn-primary {
  background-color: #424242;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 17px;
  float: right;
  
}

.btn-primary:hover {
  background-color: #787575;
}


@media (min-width: 0px) { 
    nav {
        position: relative;
        top: -8px;
        
    }
    nav ul {
        max-height: 70px;
        padding: 0px ;
        text-align:right;
    }
    nav ul li {
        display: inline-block;
        padding-left: 0px;
    }	
}







@media screen and (max-width: 1200px) {
	#otdelkavnut{width: 100%;}
	#otdelkavnutimg{width: 100%;}
	#otdelkavnesh{width: 100%;}
	#otdelkavneshimg{width: 100%;}
}


@media screen and (max-width: 800px) {
	.text-block {font-size: 16px;margin-left:10px;margin-bottom: 20px;}
	#contacts {
		height: auto;
	
	}

	#infa {
		width: 100%;
		height: auto;
		margin-bottom: 50px;
	}
	#card {
		width: 100%;
		height:auto;
	}
	.dopinfa {
		display:grid;
		text-align: left;
		margin-left:10px;
	}

}
@media screen and (max-width: 910px) {
	#about {scroll-margin-top: 50px;}
	#intobaner1 {display:none;}
	#menu {display:none;}
	#name {display: none;}
	#infobaner {display:none;}
	#name2 {width: 80%; float:left;display: block; background-color: #ffffff; }
	#name2 h2{font-size: 23px;margin-left: 10%;}


    .hamburger-menu {
        display: block;
    }

    #menu__toggle {
        opacity: 0;
        position: absolute;
        left: -9999px;
    }

    #menu__toggle:checked ~ .menu__btn > span {
        transform: rotate(45deg);
    }
    #menu__toggle:checked ~ .menu__btn > span::before {
        top: 0;
        transform: rotate(0);
    }
    #menu__toggle:checked ~ .menu__btn > span::after {
        top: 0;
        transform: rotate(90deg);
    }
    #menu__toggle:checked ~ .menu__box {
        visibility: visible;
        right: 0;
    }

    .menu__btn {
        display: flex;
        align-items: center;
        position: fixed;
        top: 10px;
        right: 20px;
        width: 26px;
        height: 26px;
        cursor: pointer;
        z-index: 2;
    }

    .menu__btn > span,
    .menu__btn > span::before,
    .menu__btn > span::after {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #787575;
        transition-duration: .25s;
    }
    .menu__btn > span::before {
        content: '';
        top: -8px;
    }
    .menu__btn > span::after {
        content: '';
        top: 8px;
    }

    .menu__box {
        position: fixed;
        visibility: hidden;
        top: 0;
        right: -100%;
        width: 190px;
        height: 270px;
        z-index: 1;
        margin: 0;
        padding: 50px 0;
        list-style: none;
        opacity: 1;
        background-color: #ffffff;
        box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
        border-radius: 20px;
        transition-duration: .25s;
    }

    .menu__item {
        display: block;
        padding: 10px 24px;
        color: #000;
        font-size: 17px;
        font-weight: 200;
        opacity: 1;
        text-decoration: none;
        transition-duration: .25s;
    }
    .menu__item:hover {
        background-color: #e3e5e6;
    }

    #menu__toggle {
        opacity: 0;
        position: fixed;
        top: 10px;
        right: 20px;
        width: 26px;
        height: 26px;
        margin: 0;
        cursor: pointer;
        z-index: 3;
    }



    .menu__btn > span,
    .menu__btn > span::before,
    .menu__btn > span::after {
        pointer-events: none;
    }

}