/** {outline: 3px solid red;}*/

.ephesis-regular {
  font-family: "Ephesis", cursive;
  font-style: normal;
}

.hero-title{
    font-family: Ephesis;
}



body {
    font-family: 'Georgia', serif;
    background: #f8f6f4;
    margin: 0;
    padding: 0;
}
.container {
    max-width: 1200px;
    margin: 50px auto 50px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    overflow: hidden;
}


header {
    display: flex;
    justify-content:space-between;
    align-items:center;
    padding: 32px 40px 16px 40px;
    background: #fff;
    
}
.nav {
    display: flex;
    gap: 32px;
}
.nav a {
    color: #222;
    text-decoration: none;
    font-size: 1.1em;
}
.logo {
    
    display: flex;
    align-items:center;
    justify-content: center;
    

}

.btn {
    background: #f5e6de;
    color: #222;
    border: none;
    padding: 14px 32px;
    font-size: 1em;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
}
.btn:hover {
    background: #efd4c6;
}

#headx {
display:flex;
justify-content:center;
align-items: center;
}

.hero {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 0px;
    background: #f7cdb7;
    background: url(img25/imgx1.jpg);
    width: 100%;
    height: 600px;
}

.hero-title {
    margin: -40px;
    font-size: 80px;
/*    font-weight: bold;*/
    color: #fad6c3;
    text-align: center;
/*    text-shadow: 5px 2px 5px #999;*/
}

.text{font-size: 25px;
    margin: 80px;
word-spacing: 10px;
color: #b36e49;
text-align: justify;
}



.gallery-section {
    padding: 30px;
    background: #fff;
}
.gallery-title {
    font-size: 2em;
    text-align: center;
    margin-bottom: 50px;
    font-weight: bold;
}
.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 40px;
}
.gallery img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
    height: 150px;
    background: #f3f3f3;
}
.location-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 50px 0px 0px 35px;
    background: #888;
    height: 350px;
}

.location-title{
        margin-top: 0px;
    }

.location-info {
    margin: 0px 50px 0px 10px;
    padding: 10px 0px 0px 40px;
    width: 500px;
    height: 240px;
    background: #f9f8f6;
    border-radius: 12px;
    display: block;
    align-items: flex-start;
    font-size: 20px;
    color: #888;
    border: 5px solid #fff;
    border-radius: 15px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);

}

.map {
    margin: 0px 50px 0px 0px;
    width: 500px;
    height: 250px;
    background: #e6e6e6;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    color: #888;
    border: 5px solid #fff;
    border-radius: 15px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
}

 #overlay{
            background: rgba(0,0,0,0.7);
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 20;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #overlay img{
            border: 5px solid white;
            border-radius: 5px;
            width: 70%;
            height: auto;
        }
    

@media (max-width: 770px) 
{
    
    .container { max-width: 100%; }
    .text{font-size: 20px;margin: 15px;padding: 15px;color: #b36e49;}

    .gallery { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .location-section { display:block; height: 650px;}
    


    header{
        display: block;

    }


    .location-info {width: 94%;margin: 0px 0px 0px -18px;}
    .map {margin: 30px 0px 0px -20px ;width: 100%;overflow: hidden;}
    .hero{background-size: 100% auto;height: 130px;}
    .hero-title{ font-size: 60px;margin:0px;}
            #overlay img{
            border: 5px solid white;
            border-radius: 5px;
            width: 70%;
            height: auto;

        }
.hero-title1{
            margin-top: -60px;
        }
         .hero-title2{
            margin-top: -20px;
        }
    

}




@media (max-width: 500px) 
{
    
    .container { max-width: 100%; }
    .text{font-size: 20px;margin: 15px;padding: 15px;color: #b36e49;}

    .gallery { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .location-section { display:block; height: 650px;}
    


    header{
        display: block;

    }


    .location-info {width: 88%;margin: 0px 0px 0px -20px ;}
    .map {margin: 30px 0px 0px -20px ;width: 100%;overflow: hidden;}
    .hero{background-size: 100% auto;height: 130px;}
    .hero-title{color: #fff; font-size: 40px;margin:0px;}
            #overlay img{
            border: 5px solid white;
            border-radius: 5px;
            width: 70%;
            height: auto;
        }

        .hero-title1{
            margin-top: -60px;
        }
         .hero-title2{
            margin-top: -20px;
        }
        .logo img {
            width: 100%;
        }

}