@import url(https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap);
@import url(https://fonts.googleapis.com/css?family=Nunito:400,700|Playfair+Display:400,700|Poppins:400,700&display=swap);
*{margin:0;padding:0;box-sizing:border-box}body{background:#fdfdfd}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{box-shadow:inset 0 0 5px grey;border-radius:3px}::-webkit-scrollbar-thumb{background:#a38b2d;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#b69100}.header{width:100%;font-family:"Playfair Display",serif}.header .for-ph{width:100%;margin:auto;height:75px;display:flex;justify-content:space-around;align-items:center;z-index:-1;display:none}.header .for-ph p{font-size:1.4rem}.header .for-ph p a{text-decoration:none;font-size:1.4rem;color:#000}.header .for-ph .toggle-bar{width:28px;height:20px;position:relative;transform:rotate(0deg);transition:0.5s ease-in-out;cursor:pointer}.header .for-ph .toggle-bar span{display:block;position:absolute;height:3px;width:100%;background:#000;border-radius:50px;opacity:1;left:0;transform:rotate(0deg);transition:0.25s ease-in-out}.header .for-ph .toggle-bar span:nth-child(1){top:0px;transform-origin:left center}.header .for-ph .toggle-bar span:nth-child(2){top:7px;transform-origin:left center}.header .for-ph .toggle-bar span:nth-child(3){top:14px;transform-origin:left center}.header .for-ph .open span:nth-child(1){transform:rotate(45deg);top:-3px;left:3px}.header .for-ph .open span:nth-child(2){width:0%;opacity:0}.header .for-ph .open span:nth-child(3){transform:rotate(-45deg);top:17px;left:3px}.header .menu-bar{width:80%;height:75px;margin:auto;display:flex;justify-content:space-between;align-items:center}.header .menu-bar a{text-decoration:none;color:#000;font-size:18px;position:relative}.header .menu-bar a::after{content:"";position:absolute;top:60%;left:-10%;width:120%;margin:auto;height:40%;background:none;z-index:-1;transition:all 400ms;opacity:0.7}.header .menu-bar a:hover:after{content:"";top:0%;height:100%;transform-origin:bottom;background:#b69100;opacity:1}.header .menu-bar a:hover{color:#fff;transition:all 400ms;transition-delay:200ms}.header .menu-bar .active{position:relative;transition:all 400ms;transition-delay:100ms}.header .menu-bar .active::after{content:"";position:absolute;top:60%;left:-10%;width:120%;margin:auto;height:40%;background:#b69100;z-index:-1;transition:all 400ms}.header .menu-bar .active:hover:after{content:"";position:absolute;top:0%;height:100%}.header .menu-bar .active:hover{color:#fff}.header .menu-bar .logo{margin-top:-7px;font-size:2rem}.header-bg{height:400px;background-image:url(imgs/rooms_bg.903331e2599d62aaf4b2eb547e99bd2f.jpg);background-size:cover;background-repeat:no-repeat;background-position:center;position:relative;z-index:-1}.header-bg .container{width:100%;height:100%}.header-bg .container .title{width:70%;margin:auto;font-family:"Poppins",sans-serif;font-weight:700;text-transform:capitalize;font-size:70px;color:#fff;height:100%;display:flex;justify-content:center;align-items:center}.header-bg .container .title p{text-align:center;z-index:3}.header-bg::before{content:"";width:100%;height:100%;background:#000;opacity:0.5;position:absolute;top:0;left:0;z-index:0}.room-details{font-family:"Poppins",sans-serif;width:80%;margin:auto}.room-details .container{width:100%}.room-details .container .detail{width:100%;height:460px}.room-details .container .detail .text{width:50%;height:100%;float:left;padding:7% 5% 7% 0;text-align:center;display:flex;flex-direction:column;justify-content:space-around;align-items:center;position:relative}.room-details .container .detail .text .title{position:relative}.room-details .container .detail .text .title p{font-size:2rem;font-weight:700;color:#404040}.room-details .container .detail .text .title .price{color:#b69100}.room-details .container .detail .text .title::after{content:"";position:absolute;bottom:-15%;left:22.5%;width:55%;height:2px;background:#404040;color:#000}.room-details .container .detail .text .content p{margin:auto;font-size:1.1rem;color:#404040;letter-spacing:5%;line-height:35px}.room-details .container .detail .text .book-btn{width:80%;height:60px;margin:0 auto;border:1px solid #b69100;cursor:pointer;transition:background 400ms}.room-details .container .detail .text .book-btn a{text-decoration:none;color:#b69100;width:100%;height:100%;display:flex;justify-content:center;align-items:center;font-size:1.2rem}.room-details .container .detail .text .book-btn:hover{border:none;background:#b69100}.room-details .container .detail .text .book-btn:hover a{color:#fff}.room-details .container .detail .text::after{content:"";position:absolute;top:35%;left:103%;background:#fff;transform:translate(-50%, -35%);width:50px;height:50px;clip-path:polygon(100% 50%, 0 0, 0 100%)}.room-details .container .detail .photo{width:50%;height:100%;float:right}.room-details .container .detail .photo img{width:100%;height:100%;object-fit:cover}.room-details .container .detail-2 .text,.room-details .container .detail-4 .text,.room-details .container .detail-6 .text{padding-left:5%;float:right}.room-details .container .detail-2 .text::after,.room-details .container .detail-4 .text::after,.room-details .container .detail-6 .text::after{left:-3%;clip-path:polygon(0 50%, 100% 0, 100% 100%)}.room-details .container .detail-2 .photo,.room-details .container .detail-4 .photo,.room-details .container .detail-6 .photo{float:left}.room-details .container .detail-1{margin-top:-50px;z-index:10}.room-details .container .detail-1 .text{padding-bottom:calc(7% - 25px)}.footer{width:100%;height:100px;background:#404040;font-family:"Poppins",sans-serif;font-weight:400}.footer .container{width:80%;margin:auto;height:100%;display:flex;justify-content:space-between;align-items:center;color:#fff}.footer .container .phone p:first-child{font-size:14px}.footer .container .phone p:last-child{font-size:12px}.footer .container .social-media p{font-size:14px;text-align:center}.footer .container .social-media .icons a{text-decoration:none;color:#fff;padding:0 3px}.footer .container .copyright p{text-align:center;font-size:14px}@media (min-width: 481px) and (max-width: 767px){.header .menu-bar a{font-size:14px}.header .menu-bar .logo{font-size:1.3rem}.header-bg .container .title{font-size:60px}}@media (min-width: 768px) and (max-width: 1024px){.header-bg .container .title{width:80%}}@media (min-width: 481px) and (max-width: 841px){.room-details .container .detail-1 .text{justify-content:space-evenly}}@media (min-width: 481px) and (max-width: 803px){.room-details .container .detail .text .title p{font-size:1.6rem}.room-details .container .detail .text .content p{font-size:1rem}}@media (max-width: 480px){.header{overflow:hidden}.header .for-ph{z-index:1;display:flex}.header .for-ph .toggle-bar{margin-top:7px;z-index:10}.header .for-ph .open span{background:#fff}.header .menu-bar{height:100vh;width:100%;display:flex;flex-direction:column;justify-content:space-evenly;background:#a38b2d;transform:translateX(100%);display:none;position:absolute;top:0;z-index:-1;pointer-events:none;transition:all 500ms}.header .menu-bar a{color:#fff;width:100%;height:10%;display:flex;justify-content:center;align-items:center}.header .menu-bar a:after{content:"";display:none}.header .menu-bar a:hover:after{content:"";display:none}.header .toggle-active{transform:translateX(0%);pointer-events:all;z-index:13;display:flex}.header-bg .container .title{font-size:50px}.room-details .container .detail-1{margin-top:0}.room-details .container .detail{margin-top:30%;height:1000px;padding:0;display:flex;flex-direction:column-reverse}.room-details .container .detail .text{padding-bottom:0}.room-details .container .detail .text{width:100%;height:60%;float:none;justify-content:space-evenly;padding:0}.room-details .container .detail .text::after{content:"";position:absolute;top:-4%;left:70%;background:#fff;width:50px;height:50px;clip-path:polygon(50% 0%, 0% 100%, 100% 100%)}.room-details .container .detail .photo{width:100%;height:40%;float:none}.footer{height:200px}.footer .container{height:200px;width:90%;flex-direction:column;justify-content:space-around}.footer .container .phone p:first-child{font-size:12px}.footer .container .phone p:last-child{font-size:10px}.footer .container .social-media p{font-size:12px}.footer .container .social-media .icons a i{font-size:12px}.footer .container .copyright p{font-size:14px}}

