@font-face{
     font-family: "miller";
     src: url('../fonts/miller.ttf') format("truetype");
     
 }
 
 @font-face{
   font-family: "GillSans";
   src: url('../fonts/GILLSANS.ttf') format("truetype");  
 }
 
  * {
	/*	box-sizing: border-box;*/
	}
 
 
 body {
            font-family: 'miller', sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(to right, #f9f9f9, #ececec);
            color: #333;
            background-image:url("../images/Robertos-website-main.jpg");
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
}
        .container {
            text-align: center;
            max-width: 950px;
            width: 100%;
            padding: 20px;
        }
        
        .logo {
            width: 50%;
            max-width: 200px;
            height: auto;
            margin: 0 auto 20px;
            display: block;
        }
        
        h1,h2,h3,h4,h5,h6{
            font-family: 'miller', sans-serif;
        }
        
        h1 {
            font-size: 2.5rem;
            margin: 0 0 10px;
            color: #333;
        }
        h2{
            padding-top: 15px;
            padding-bottom: 10px;
            color: black;
        }
        p {
            font-family: 'GillSans', sans-serif ;
            font-size: 1.2rem;
            margin: 0 0 40px;
            color: #555;
        }
        .locations {
            font-family: 'GillSans', sans-serif ;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            column-gap: 20px;
        }
        
        .location {
            background: linear-gradient(125deg, #A86946 50%, #A86946 90%);
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            padding: 20px;
            max-width: 200px;
            text-align: center;
            flex: 1 1 calc(33% - 40px);
            margin-bottom: 20px;
        }
        
       
        .location:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 165, 0, 0.5); /* Orange shadow on hover */
        }
        .location h3 {
            font-size: 1.2rem;
            margin: 0;
            color: #ffffff;
        }
        .location > a{
            text-decoration: none;
        }
        @media (max-width: 768px) {
            .location {
                flex: 1 1 calc(50% - 40px);
            }
        }
        @media (max-width: 480px) {
            .location {
                flex: 1 1 100%;
            }
        }