@font-face {
	font-family: "Montserrat";
	src: url("fonts/Montserrat/Montserrat-VariableFont_wght.ttf") format("truetype");
	font-display: swap;
}
	
	
		body{
			padding: 0px;
			margin: 0px;
			font-family: "Montserrat", serif;
          background-color: #cd071e;
		}

		div{
          
		}
		
		#main{
			min-height: 100vh;
	        background-color: white;
		}
		
		.content-wrapper{
			flex: 1;
		}
		
		
		#header{
			display: flex;
			position: fixed;
			top: 0px;
			background-color: white;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 66px;
			border-bottom: #cd071e 3px solid;
			z-index: 1000;
		}
		
		#menu-block{
			display: absolute;
			top: 0px;
			width: 100%;
			background-color: white;
			padding: 33px 0px;
		}
		
		#logo{
			height: 60px;
			width: auto;
		}
		
		#open-menu{
			display: flex;
			align-items: center;
			background-color: white;
			position: absolute;
			right: 50px;
			height: 40px;
			width: 40px;
		}
		#open-menu:hover{
			cursor: pointer;
		}
		
		#open-menu img{
			width: 40px;
			height: auto;
		}
		
		
		
		#menu-overlay{
			background-color: rgba(255, 255, 255, 0.7);
			backdrop-filter: blur(7px);
			height: 100vh;
			position: fixed;
			inset: 0;
			display: none;
			z-index: 1000;
			flex-direction: column;
		}
		
		#menu-overlay.active{
			display: flex;
		}
		
		#close-menu{
			position: fixed;
			top: 13px;
			right: 50px;
			height: 40px;
			width: 40px;
		}
		
		#close-menu:hover{
			cursor: pointer;
		}
		
		#menu-header{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 66px;
		}
		
		#menu-items-wrapper{
			display: flex;
			flex-direction: column;
			align-items: stretch;
			width: 100%;
			padding: 0px;
			flex: 1;
			overflow: hidden;
		}

		#menu-items-wrapper ul{
			padding: 0px;
			margin: 0px;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			flex: 1;
			width: 100%;
		}

		#menu-items-wrapper ul li{
			list-style: none;
			color: #cd071e;
			padding: 0 30px;
			text-align: center;
			font-size: 20px;
		}
		
		#menu-items-wrapper ul li a{
			all: unset;
		}
		
		#menu-items-wrapper ul li:hover{
			font-weight: bold;
			cursor: pointer;
		}
		
		#pic-slider{
			display: flex;
			gap: 1vw;
			padding: 0 4vw;
		}
		
		#pic-slider img{
			width: 30vw;
			height: auto;
			box-shadow: #000000 0px 0px 8px;
			object-fit: cover;
		}
		
		
		.headline{
			display: flex;
			width: 100%;
			justify-content: center;

		}
		
		.headline p{
			font-size: 30px;
			color: #cd071e;
			margin: 25px;
			text-align: center;
		}
		
		.underline-text{
			color: black;
			font-size: 25px;
			text-align: center;
			margin: 10px 0px 5px 0px;
		}
		
		.underline-text::after {
  			content: "";
 			display: block;
  			width: 120px;          /* fixed width */
  			height: 4px;           /* thickness */
  			background: #c4001a;   /* red color */
  			margin: 8px auto 0;   /* spacing + centered */
		}
		
		
		
		#footer{
			display: flex;
			align-items: center;
			background-color: #cd071e;
			min-height: 120px;
			padding: 0px 4vw;
		}
		
		#logo-wrapper{
			height: 70px;
			width: auto;
			margin-right: 50px;
		}
		
		#logo-wrapper img{
			height: 100%;
			width: auto;
		}
		
		#footer-menu-wrapper{
			flex: 1;
			display: flex;
			color: white;
		}
		
		#footer-menu-wrapper ul{
			list-style: none;
			display: flex;
			grid-template-columns: repeat(8, 1fr);
			justify-content: space-between;
			width: 100%;
		}
		
		#footer-menu-wrapper ul li{
			display: inline;
		}
		
		#footer-menu-wrapper ul li:hover{
			font-weight: 599;
		}
		
		#footer-menu-wrapper ul li a{
			color: white;
			text-decoration: none;
			text-align: center;
		}
		
		@media (max-width: 1200px) {
			#footer-menu-wrapper ul{
				display: grid;
				margin: 0px;
				grid-template-columns: repeat(3, 1fr);
				grid-auto-rows: minmax(40px, 1fr);
				
				padding: 5px 0px;
			}
			
			#footer-menu-wrapper ul li {
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			#footer{
				min-height: 140px;
			}
		}
		
		
		@media (max-width: 700px) {
			#footer-menu-wrapper ul{
				grid-template-columns: repeat(2, 1fr);
			}
			
			#footer{
				min-height: 170px;
			}
		}
		
		@media (hover: none) and (orientation: portrait){
          #header{
          	height: 100px;
          }
          
          .headline p{
           font-size: clamp(32px, 4vw, 50px); 
          }
          
          #menu-block{
            padding: 50px 0px;
          }
          #logo{
            height: 100px;
          }
          #open-menu{
            height: 70px;
            width: 70px;
          }
  		#open-menu img{
  		  	width: 70px;
  			}	
              
          #close-menu{
            height: 70px;
            width: 70px;
          }
  			#close-menu img{
            	width: 70px;  
  			}
          #menu-header{
            height: 100px;
          }
          
          #menu-items-wrapper ul li{
          	font-size: 32px;
          }
          
          
          #footer-menu-wrapper ul{
          	grid-template-columns: repeat(2, 1fr);
          }
          #footer-menu-wrapper ul li{
          	font-size: 28px;
            padding: 15px 0px
          }
          
  
		}