.top{
    background-color:rgb(124, 95, 47);
    color: white;
    display: grid;
    justify-content: center; 
}
.p1{
    margin-top: 10px;
}
.navbar{
    position: sticky;
}
.nav-item{
    margin-left: 9px;
    white-space: nowrap;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
#btnsearch{
    border: 1px solid white;
}
.d-flex{
    margin-left: 150px;
}
.fa-regular,.fa-solid{
    color: white;
    margin-left: 40px;
    margin-top: 12px;
}
.fa-regular:hover,.fa-solid:hover{
    color: grey;
}
.ban1>img,.ban2>img,.ban3>img,.ban4>img,.ban5>img{
    width: 100%;
}
.ban1{
    position: relative;
}
.shop,.shop1,.shop2,.shop3,.shop4,.shop5,.shop6{
    position: absolute;
    top: 60%;
    left: 60%;
}
.a1,.a2,.a3,.a4,.a5,.a6,.a7,.a8,.a9,.a10,.a11,.afig{
    font-size: 1.3vw;
    font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 6px 19px;
    background-color: #ffffff;
    border-width: 1px;
    color: black;
    text-decoration: none;
}
.a10,.a11,.afig{
    color: white;
    background-color: black;
}
.afig{
    margin-left: 30%;
}
.shop1{
    left:71%
}
.shop2{
    left: 84%;
}
.ban2,.ban3,.ban4,.ban5,.overlay{
    margin-top: 10px;
    position: relative;
}
.shop3{
    left: 13%;
}
.shop4{
    left: 11%;
}
.shop5{
    left: 80%;
}
.shop6{
    left: 15%;
}
#rm{
    width: 120px;
    height: 120px;
    border: 3px solid orange;
    padding: 4px;
}
.h6{
    text-align: center;
    padding: 20px 0px;
    font-size: 1.3vw;
}
#spot{
    margin: 0px 290px;
    padding-bottom: 20px;
}
.overlay{
    width: 100%;
    height: 556px;
    background-color: #2A5C5E;
}
.org{
    width: 100%;
    height: 700px;
    position: relative;
}
#f2{
    padding:20px 30px 0px 30px;
}
#f1{
    padding-top: 190px;
    z-index: 50;
}
.org>p{
    color: white;
    position: absolute;
    z-index: 100;
    top: 9%;
    left: 2%;
    font-size: 1.3vw;
}
.org>h1{
    color: white;
    position: absolute;
    z-index: 100;
    top: 3%;
    left: 2%;
}
.md{
    padding: 100px 0px;
    position: relative;
}

.clrg,.clrg1,.clrg2{
    background-color: rgb(23, 105, 100);
    height: 550px;
    width: 100%;
}
.clrg1{
    background-color: #DAD2CC;
}
.clrg2{
    background-color: #191919;
}
.clrgmx{
    position:absolute;
    left: 45%;
    top: 3%;
    height:50px;
}
.clrgmy{
    position: absolute;
    top: 40%;
    left: 1%;
}
.font2,.font{
    position: absolute;
    top: 15%;
    left: 5%;
}
.font3,.font1{
    position: absolute;
    top: 22%;
    left: 5%;
}
.p2,.p3,.p4,.p5,.p6,.p7{
    font-size: 3vw;
    color: white;
}
.p4,.p5{
    color: black;
}
.p3,.p5,.p7{
    font-size: 2vw;
}
.shop7,.shop8{
    position: absolute;
    top: 30%;
    left: 5%;
}
.shop8{
    left: 16%;
}
.fig{
    font-size: 2vw;
    text-align: center;
}
.fig1{
    font-size: 1.3vw;
    text-align: center;
}
div.scroll-container {

    background-color: #ffffff;
    overflow: auto;
    white-space: nowrap;
    padding: 10px;  
}

.scroll-container {
    width: 90%;
    margin: auto;
    padding-top: 5%;
    overflow-x: scroll;
    overflow-y: hidden;
    display: flex;
    gap: 10px;
}
  
.scroll-container div img {
    width: 100%;
    height: auto;
}
.scroll-container div div{
    display: flex;
    justify-content: space-between;
}
.scroll-container h3{
    width: 300px;
    font-size: 1vw;
    line-height: 1.5;
    float: left;
    font-weight: 700;
}
.scroll-container h4{
    float: right;
    width: 50px;
    font-size: 1vw;
    line-height: 1.5;
    font-weight: 700;
}
footer{
    background-color: rgba(24,24,24);
    margin-top: 10%;
    padding: 30px 0;
    color: rgba(223,224,225);
    width: 100%;
}
footer .container .out{
    padding: 0 4%;
    border-bottom: 1px solid ;
}
footer h6{
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
}
.row ul{
    list-style-type: none;
    padding-left: 0;
}
.row ul li{
    padding-left: 0;
    padding-top: 10px;
    font-weight: 400;
    font-size: 1vw;
}
.d-flex li{
    padding: 0 30px;
}

.d-flex li i{
    font-size: 22px;
}
li img{
    width: 60px;
    border: 2px solid rgb(102, 102, 102);
    border-radius: 15px;
}
li img:hover{
    border: 2px solid rgb(255, 255, 255);
}

.bottom a{
    text-align: center;
    margin-left: 43%;
    color: rgba(223,224,225);
    padding: 10px 15px;

}
.bottom p{
    justify-content: end;
    margin-bottom: 0;
    text-align: right;
    font-size: .8vw;
    text-transform: uppercase;
}
.bottom #btn{
    border: 1px solid rgb(223,224,225);
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
}
.bottom #btn:hover{
    border: 2px solid rgb(255, 255, 255);
}
.bottom{
    padding-top: 2%;
}
footer li:hover{
    color: white;
}