@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800&display=swap');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', serif;
    -webkit-tap-highlight-color: transparent;
}
:root{
    --main: #f73f4b;
    --white: #fcfcfc;
    --bg: #fefefe;
    --black: #141414;
    --lightBlack: #6c6c6c;
    --textBlack: #3b3b3b;
    --border: 1px solid #e7e7e7;
    --boxShadow: 0 4px 10px rgba(0,0,0,.1);
    --green: #5f7752;
}
body{width: 100vw; overflow-x: hidden; background: var(--bg)}
body.noscroll{height: 100vh; overflow: hidden}
.flex{display:flex;align-items: center}
.flex.jcc{justify-content: center;}
.flex.jcsb{justify-content: space-between;}
.flex.fdc{flex-direction: column;}
.flex.jcs{justify-content: flex-start;}
.nav{display: flex; align-items: center; justify-content: space-between; padding: 12px 25px; transition: 300ms ease; position: relative;}
.nav.home{position: fixed;top: 0; left: 0; height: auto; width: 100vw; z-index: 5; background: linear-gradient(to bottom, rgba(255,255,255,.5) 0%, rgba(0,0,0,0) 100%)}
.nav.fixed{padding: 8px 15px; position: fixed; top: 0; left: 0; z-index: 5; height: auto; width: 100vw; background: var(--white); animation: slideIn1 500ms ease; backdrop-filter: blur(1px); border-bottom: var(--border)}
.navGrp{display: flex; align-items: center; justify-content: flex-end; padding-right: 15px}
.navML{color: var(--black); padding: 5px; font-size: 130%; transition: 300ms ease;}
.navML:hover{transform: scale(1.07);}
.navGrp{width: 10%}
.nav.fill{background: var(--white)}
.nav.home .navLia, .nav.fixed .navLia.active{color: var(--white)}
.nav.fixed .navLia{color:var(--textBlack)}
.navLogo{height: 60px}
.nav.home .navLogo.black{display: none}
.navLogo.white{display:none}
.nav.home .navLogo.white{display: block}
.nav.fixed .navLogo{height: 50px}
.nav.fixed.home .navLogo{display: none}
.nav.fixed.home .navLogo.black{display: block}
.navUl{display: flex; list-style: none; width: 60%; align-items: center; justify-content: center}
.navLia{color: var(--black); text-transform: uppercase; font-size: 80%; display: block; font-weight: 500; text-decoration: none; transition: 300ms ease; padding: 5px 15px; letter-spacing: 1px; }
.navLia:hover{color:var(--green)}
.navLia.active{color: var(--white); background: var(--green); border-radius: 6px;}
.mobLi{display: none}

.intro{height: 100vh; display: flex; flex-direction: column; justify-content: center; background: url('assets/the-shilaroo-project-home.jpeg'); background-size: cover; position: relative; background-position: center;}
.intro::after{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(2px); z-index: 1}
.introDiv{position: relative; z-index: 2;text-align: center;}
.introHead{font-size: 80px; font-weight: 600; margin-bottom: -20px; color: var(--white); text-align: center;}
.introP{color: var(--green); font-size: 200%; font-weight: 600}

.hero{display: grid; grid-template-rows: 60% 1fr; height: 100vh}
.heroHead{font-size: 70px; color: var(--black); font-weight: 600; margin-bottom: -5px}
.heroUl{display: flex; list-style: none; justify-content: center; color: var(--white)}
.heroLi{padding: 0 10px; font-size: 150%}
.heroLi:not(:last-child){border-right: 1px solid var(--white)}
.heroImg{height: 100%; width: 100%; object-fit: cover; position: fixed}
.heroImgDiv{background: url('assets/intro_bg.jpg'); background-size: cover; position: relative; background-position: bottom; background-attachment: fixed; }
.heroDiv{display: flex; align-items: center; justify-content: center; flex-direction: column;}

.hero_{position: relative; height: 100vh; width: 100vw; display: flex;align-items: center;justify-content: center;overflow: hidden;}
.hero_img{width: 100%; height: 100%; object-fit: cover;}
.image_slider{margin:60px auto;width:90%}
.slider_image_container{position: relative;overflow: hidden;aspect-ratio: 16/9;transition:300ms ease;cursor:pointer}
.slider_image_container:hover{filter:brightness(120%)}
.slider_image{object-fit: cover;height: 100%;width: 100%;}
.ps_btn{background:var(--white);height:40px;width:40px;color:var(--green);transition:300ms ease;border-radius: 50%;z-index:2;outline:none;border:none;cursor:pointer;font-size:140%;display:grid;place-items: center;position: absolute; top: 50%; transform: translateY(-50%);box-shadow: 0 2px 5px rgba(0,0,0,0.2);}
/* .ps_btn{background:var(--white);height:40px;width:40px;color:var(--green);transition:300ms ease;border-radius: 50%;z-index:2;outline:none;border:none;cursor:pointer;font-size:140%;display:grid;place-items: center;margin-top: 40px;} */
.ps_btn:hover{filter:brightness(120%)}
.ps_btn.ps_left{left:-20px}
.ps_btn.ps_right{right:-20px}
.image_carousel{overflow: visible;}
.ps_btn:disabled{opacity: .5;pointer-events: none;}
.about_section{margin:60px auto;width:60%;text-align: center;line-height: 170%;font-size: 90%;}

.indContainer{min-height: 90vh;  width: 80%; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; padding: 20px 0; place-items: center;}
.conImg{width: 100%; height: 80%; object-fit: cover; max-height: 70vh}
.conHead{font-weight: 600; font-size: 200%; color: var(--black)}
.tsHead{font-weight: 600; font-size: 220%; margin-bottom: 10px;}
.conP{color: var(--black); font-size: 90%; margin: 12px 0 25px 0; }
.tsHead, .tsP, .cuForm, .conLink{position: relative; z-index: 2; color: var(--black);}

.conLink{font-size: 90%; color: var(--white); padding: 10px 30px; background: var(--green); border-radius: 30px; text-decoration: none; transition: 300ms ease}
.conLink:hover, .nlBtn:hover, .medLink:hover, .wsOBtn:hover, .bsBtn:hover{filter: brightness(115%)}
.indContainer:not(:last-of-type){border-bottom: var(--border)}

.tsDiv{display: flex;align-items: center; justify-content: center; height: 70vh; flex-direction: column; background: url('assets/the\ space.jpeg'); background-position: center; background-attachment: fixed; background-size: cover; position: relative; overflow: hidden; margin: -10px auto}
.tsDiv.cuDiv{background: url('assets/contact-us-bg.jpg'); background-position: center; background-attachment: fixed; background-size: cover; }
.tsDiv::after{content:'';position: absolute; top: -20px; left: 0; height: 110%; width: 100%; background: rgba(255,255,255,.9); backdrop-filter: blur(2px); z-index: 1}
.tsP{width: 80%; max-width: 900px; font-size: 95%}

.footer{background: var(--black); display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 40px 0; margin-top: 150px; position: relative; padding-top: 100px}
.nlDiv{padding: 20px; background: linear-gradient(to right, #eee 0%, #f1f1f1 100%); border-radius: 20px;; width: 90%; max-width: 850px; position: absolute; left: 50%; margin: 0 auto; top: -55%; z-index: 2; transform: translate(-50%, 50%); text-align: center; box-shadow: var(--boxShadow); color: var(--black)}
.nlHead{font-weight: 600; font-size: 160%}
.nlP{font-size: 70%; color: var(--lightBlack); max-width: 500px; margin: 5px auto}
.nlForm{display: grid; grid-template-columns: 75% 25%; grid-gap: 5px; width: 90%; max-width: 500px; margin: 10px auto}
.nlInput{padding: 12px; border: var(--border); transition: 300ms ease; outline: none; border-radius: 10px; font-size: 80%}
.nlBtn{border-radius: 10px; color: var(--white); border: none; outline: none; cursor: pointer; background: var(--green); font-size: 80%; transition: 300ms ease; padding: 12px}
.nlInput:hover, .nlInput:focus{border-color: var(--green);}
.fCredit{background: var(--green); text-align: center; color: var(--bg);font-size: 80%; padding: 15px 0}
.aCre{font-size: 80%; margin-top: 3px}
.aCre a{text-decoration: none; color: var(--bg)}
.footUl, .fUl{display: flex; list-style: none; margin: 2px 0}
.footLia, .fLia{transition: 300ms ease; text-decoration: none;}
.fLia{padding: 0 10px; text-transform: uppercase;  color:#ccc; letter-spacing: 1px; font-size: 70%}
.fLia:not(:last-of-type){border-right: var(--border)}
.footLia{color: grey; font-size: 70%; padding: 5px}
.fLia:hover, .footLia:hover{color: var(--white)}
.medLink{font-size: 130%; height: 45px;width: 45px; border-radius: 50%; background: var(--green); display: grid; place-items: center; color: var(--white); text-decoration: none; transition: 300ms ease; margin: 5px}
.medLinkDiv{display: flex}
.fLogo{height: 80px; margin-bottom: -7px; margin-top: 20px}
.menuBar{display: none}

.puWrap{position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; background: rgba(0,0,0,.3); backdrop-filter: blur(1px); z-index: 10; display: grid; place-items: center;}
.puDiv{background: var(--white); padding: 40px 20px; border-radius: 10px; width: 85%; max-width: 600px; box-shadow: var(--boxShadow); animation: pop 500ms; position:relative; }
.alClose{position: absolute; top: 15px;right: 15px; font-size: 200%; color: grey; transition: 300ms ease; cursor: pointer;}
.alClose:hover{color: var(--lightBlack)}
.alHead{font-weight: 600; font-size: 150%; text-align: center; margin-bottom: 10px;}
.alP{font-size: 80%; width: 90%; margin: 5px auto}

.stTop{position: fixed; bottom: 30px; right: 20px; background: rgba(0,0,0,.5); display: grid; place-items: center; color: var(--white); font-size: 130%; border-radius: 5px; z-index: 5; transition: 300ms ease; padding: 13px; cursor: pointer; transform: scale(0); transform-origin: center;}
.stTop.show{transform: scale(1);}
.stTop:hover{background: var(--black)}

.tstmnP{color: var(--textBlack); font-size: 80%}
.tstmnlDiv{text-align: center; padding: 60px 0; width: 90%; max-width: 1000px; margin: 25px auto; color: var(--textBlack)}
.tstmn{padding: 15px; text-align: left;}
.tstCont{margin-bottom: 30px}
.testimonials{height: auto}
.swiper-pagination-bullet-active{background: var(--green)}
.tstmnName{margin-top: 10px; font-size: 90%}
.tstmnTitle{font-size: 70%; color: var(--lightBlack)}

.pageTop{height: 70vh; position: relative; overflow: hidden}
.pageTopImg{height: 100%; width: 100%; object-fit:cover}
.pageTopHead1{bottom: 40px; left: 50%; font-size: 80px; color: var(--white); z-index: 2; transform: translateX(-50%)}
.pageTopHead{position: absolute; bottom: 30px; left: 60px; font-size: 70px; color: var(--white); z-index: 2; }
.pageTop::after{content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 100%); z-index: 1}
.ptp1.pageTop::after{display: none}

.pageContainer{width: 90%; max-width: 1000px; padding: 30px 0; margin: 0 auto; color: var(--textBlack)}
.pageText{color: var(--textBlack)}
.pageConHead{font-size: 30px; text-align: center; position: relative; margin-bottom: 10px; font-weight: bold; color: var(--black); margin-top: 20px}
.pageConHead::after{content:''; position: absolute; bottom: -12px; left: 50%; height: 8px; width: 8px; background: var(--green); border-radius: 50%; transform: translateX(-50%); z-index: 2; border: 2px solid var(--bg)}
.pageConHead::before{content:''; position: absolute; bottom: -7px; left: 0; height: 2px; width: 100%; background: #ccc; transform: scaleX(.2); z-index: 1}

.sgWords{max-width: 700px; margin: 20px auto}
.wihyImg{width: 80%; margin: 0 auto; max-width: 500px; margin-bottom: 20px}
.moWrap{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 40px 30px; margin-top: 30px}
.moWrap .conHead{font-size: 140%; color: var(--textBlack)}
.moWrap .conDiv{width: 100%; padding: 0}
.moWrap .conP{margin: 5px 0 10px 0}

a{text-decoration: none}
.wsOImg{width: 100%; height: 200px; object-fit: cover; border-radius: 5px; margin-bottom: 10px; margin-top: 20px}

.cfcContainer{padding: 40px; background: #eee}
.cfcContainer .pageConHead{margin-bottom: 30px}
.cfcContainer .pageText{max-width: 1000px; margin: 0 auto; font-size: 80%; margin-bottom: 8px}

.ucwsWrap{padding: 20px 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 15px 5px}
.ucWorkShop{background: rgb(247, 247, 247); border-radius: 5px; box-shadow: var(--boxShadow); transition: 300ms ease; margin: 5px; overflow: hidden; padding-bottom: 20px; position: relative;}
.ucwsWrap.medCov .ucWorkShop{display: grid; grid-template-columns: 1fr 1fr; width: 100%; place-items: center; margin-bottom: 30px; background: none}
.ucWorkShop:hover{transform: scale(1.03)}
.ucWSImg{width: 100%; height: 150px; object-fit: cover;}
.ucWSDet{padding: 15px; white-space: normal;}
.ucWSHead{color: var(--textBlack); font-size: 130%; font-weight: bold; line-height: 20px; margin-bottom: 10px;}
.ucWSP{font-size: 60%; color: grey}
.wsOBtn{color: var(--white); font-size: 80%; padding: 8px 20px; background: var(--green); border-radius: 5px; transition: 300ms ease}
.wsCat{position: absolute; top: 5px; right: 5px; color: var(--textBlack); background: var(--white); font-size: 55%; padding: 3px 10px; border-radius: 3px; font-weight: 600; box-shadow: var(--boxShadow);}
.wsCat.wsRO{top: 125px; color: var(--white); background: var(--green)}
.medCovImg{width: 100%;}
.medCovText{color: var(--textBlack); font-size: 120%}

.otDiv{display: grid; grid-template-columns: 30% 1fr; grid-gap: 20px; margin-bottom: 50px; padding: 20px; color: var(--textBlack); place-items: center;}
.otImg{border-radius: 50%; width: 80%; object-fit: contain; max-width: 200px;}
.otName{font-size: 30px; font-weight: bold;}
.otTitle{color: grey; font-size: 90%; margin: 2px 0 10px 0; font-style: italic;}
.otPText{color: var(--lightBlack); font-size: 90%}
.visTxt{font-weight: bold; font-size: 120%;}

.galDiv, .blogWrap{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; width: 80%}
.galImg{width: 100%; object-fit: contain}

.listHead{font-size: 40px; margin-left: -5px; margin-bottom: 10px; color: var(--black)}

.cuForm{width: 80%; max-width: 900px}
.cuInpsDiv, .intGrid{display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0 10px}
.label{display: block; font-size: 70%; margin: 15px 0 3px 0}
.input{resize: vertical; display: block; width: 100%; outline: none; border: var(--border); padding: 13px; transition: 300ms ease; border-radius: 5px; font-size: 80%}
.input:hover, .input:focus{border-color: var(--green)}
.inpGrp{width: 100%; margin: 0 auto}
.nlBtn.cuBtn{margin-top: 25px; padding: 15px 30px; min-width: 20%}

.roomsTilesWrap{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 15px; padding: 40px 0}
.roomTile{transition: 300ms ease; display: grid; grid-template-columns: 45% 55%; border-radius: 10px; border: var(--border);}
.tileImg{width: 100%; height: 170px; object-fit: cover; border-radius: 10px;}
.tileDetails{padding: 15px; position: relative}
.tileUl{list-style: none; display: flex; flex-wrap: wrap; margin: 5px 0}
.tileLi{font-size: 65%; color: var(--lightBlack); line-height: 14px;}
.tileLi:not(:last-child){margin-right: 13px; position: relative}
.tileLi:not(:last-child)::after{content:''; position: absolute; right: -9px; top: 50%; height: 3px; width: 3px; border-radius: 50%; background-color: rgb(171, 171, 171); transform: translateY(-50%);}
.tileHead{font-weight: 600; color: var(--textBlack); font-size: 115%;}
.tPrice{font-weight: 600; color: var(--textBlack)}
.tPriceSpan{font-weight: 400; font-size: 80%}
.roomTile:hover{transform: scale(1.02)}

.galWrap{ max-width: 1000px; margin: 10px auto; position: relative; }
.galleryGrid{display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; grid-gap: 5px;}
.sapGal{color: var(--textBlack); font-size: 70%; cursor: pointer; padding: 5px 10px; border-radius: 8px; background: var(--white); position: absolute; bottom: 10px; right: 10px; transition: 300ms ease;border: var(--border); font-weight: 500; z-index: 2}
.sapGal:hover{filter: brightness(120%);}
.galleryImg{width: 100%; height: 100%; object-fit: cover; border-radius: 5px;}
.galleryImg:nth-child(1){grid-column: 1 / 3; grid-row: 1 / 3}
.galleryImg:nth-child(2){grid-row: 1 / 3}

.fsGalleryWrap{position: fixed; bottom: 0; left: 0; height: 100vh; width: 100vw; overflow: hidden; background: var(--white); display: flex; align-items: center; justify-content: center; animation: slideFadeIn 300ms ease-in; z-index: 10}
.fullScreenGallery{overflow-y: scroll; height: 100%; width: 100%; overflow-x: hidden; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 5px; grid-auto-flow: dense; max-width: 1000px}
.fsGalleryImg{width: 100%; height: 100%;object-fit: cover;}
.galImg2{grid-column: span 2}
.galImg3{grid-row: span 2}
.galClose{position: absolute; top: 15px; right: 25px; font-size: 150%; color: var(--green); transition: 300ms ease;cursor: pointer; z-index: 11; background: var(--white)}
.galClose:hover{color: var(--lightBlack)}

.page{margin: 10px auto; max-width: 1200px; display: grid; }
.pGallery{position: relative; height: 350px;}
.rGalGrid{display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; grid-gap: 5px; height: 100%; overflow: hidden;border-radius: 8px;}
.rGalImg{width: 100%; height: 100%; max-height: 350px; object-fit: cover; border-radius: 8px;}
.rGalImg:nth-child(1){grid-column: span 2; grid-row: span 2;}
.rGalImg:nth-child(2){grid-row: span 2;}
.pageHead{font-size: 40px; color: var(--textBlack); font-weight: 600; margin-bottom: -10px;}
.pageTitle{padding: 5px 0 15px 0; position: sticky; top: 0; z-index: 4; background: var(--bg);}
.pageDetails{display: grid; grid-template-columns: 1fr 30%; grid-gap: 15px; border-bottom: var(--border)}
.pageTxtContent p{color: var(--textBlack); font-size: 87%;}
.ptcHead{font-size: 130%; margin-bottom: 5px;}
.review{padding: 15px 5px; }
.review:first-of-type{padding-top: 0}
.review:not(:last-child){border-bottom: var(--border);}
.reviewP{font-size: 80%; max-width: 600px}
.rvHead{border-top: var(--border); padding-top: 15px;}
.reviewName{font-weight: 500; margin-top: 8px;}
.reviewDate{font-size: 50%; margin-top: -3px; color: #939393; font-weight: 500;}
.pBtm, .pageDetails{padding: 20px 0}

.blogWrap{width: 100%; grid-gap: 20px; margin: 0 auto; max-width: 1100px; margin-top: 20px;}
.blog{padding: 20px 0; color: var(--textBlack); padding: 15px; }
.blogHead{margin-top: -8px; font-size: 140%; line-height: 23px;}
.blogHead.pHead{font-size: 200%; line-height: 30px;}
.blogDate{font-size: 70%; color: #8d8d8d; margin: 8px 0;}
.blogP{ color: var(--lightBlack); margin-bottom: 10px; font-size: 95%}
.blogLink{color: var(--green)}

.sbFormDiv{position: sticky; top: 100px; padding: 15px; border-radius: 10px; border: var(--border); box-shadow: var(--boxShadow); color: var(--textBlack)}
.sbHead{font-weight: 400; font-size: 130%}
.sbPrice{font-size: 90%}
.sbBtn{width: 100%; padding: 15px; border-radius: 8px; background-color: var(--green); color: var(--white); font-size: 80%; transition: 300ms ease; cursor: pointer; margin: 15px 0 5px 0; outline: none; border: none}
.sbBtn:hover{filter: brightness(110%)}
.sbTxtWrap{padding-bottom: 10px; border-bottom: var(--border);}

.bsBg{position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; z-index: 5; background: rgba(0,0,0,.3)}
.bsWrap{position: relative; height: 100%; width: 100%; display: grid; place-items: center;}
.bsHead{text-align: center; font-weight: 500; padding: 20px; border-bottom: var(--border);}
.bottomSheet{background: var(--white); height: auto; width: 100%; max-width: 500px; border-radius: 15px; animation: slideIn 500ms ease; }
.bsForm{padding: 25px; padding-top: 15px; position: relative}
.bsClose{position: absolute; top: -45px; right: 15px; font-size: 150%; color: var(--lightBlack); transition: 300ms ease; cursor: pointer;}
.bsForm .inpGrp{max-width: 370px}
.bsClose:hover{color: var(--textBlack)}
.bsBtn{color: var(--white); background: var(--green); padding: 10px; border-radius: 8px; transition: 300ms ease; cursor:pointer; margin-top: 20px; width: 120px; outline: none; border: none}
.bsBtn:disabled{opacity: .8; cursor: context-menu}
.bsBtn.ptpBtn{width: auto; padding: 10px 20px}

.loading{background: var(--green); position: relative; height: 7px; width: 7px; border-radius: 50%; margin: 5px auto; animation: pulse 2000ms ease infinite; animation-delay: .3s;}
.loading::after, .loading::before{content:''; height: 7px; width: 7px; position: absolute; top: 0; background: var(--green); animation: pulse 2000ms ease infinite; border-radius: 50%;}
.loading::before{left: -9px; animation-delay: 0;}
.loading::after{right: -9px; animation-delay: .6s;}
.loading.white{background: var(--white)}
.loading.white::before, .loading.white::after{background: var(--white)}

.errMsg{text-align: center; color: var(--main); font-size: 80%}
.errMsg.sxs{color: var(--green)}
.ssbHead{font-size: 70%; color: var(--lightBlack)}

.inGG-wrap{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 15px; max-width: 370px; margin: 5px auto}
.inGG-wrap .inpGrp{width: 100%;}

.rollerCon{display: grid; grid-template-columns: 1fr 60% 1fr; place-items: center; padding: 8px; border-radius: 5px; border: var(--border)}
.rollIco, .rolValue{color: rgb(157, 157, 157)}
.rolValue{cursor: context-menu}
.rollIco{cursor:pointer; font-size: 170%; transition: 300ms ease;}
.rollIco:hover{color: var(--lightBlack)}

.bookingGrid{display: grid; grid-template-columns: 45% 1fr; place-items: center;}
.bkRight{width: 100%}
.bookingGrid .sbHead{text-align: center;}
.bkLeft{width: 80%; padding: 20px; border: var(--border); border-radius: 10px; box-shadow: var(--boxShadow); height: 100%}
.bkTable{width: 100%; border-collapse: collapse; margin-top: 10px; border-top: var(--border)}
.bkTd{font-size: 80%; color: var(--lightBlack); padding: 5px 10px }
.bkTd.right{font-weight: 500; text-align: right;}
.bkTd:nth-child(1), .bkTd:nth-child(2){padding-top: 20px;}
.listUl{display: grid; grid-template-columns: repeat(2, 1fr); list-style: none; grid-gap: 10px;}
.listLi{padding: 10px; border: var(--border); background: var(--white); border-radius: 10px; font-size: 120%; color: var(--lightBlack)}

.intGrid{grid-gap: 20px; width: 80%; max-width: 1000px; margin: 100px auto; place-items: center}
.iGridDiv{text-align: center;}
.iGrigImg{width: 100%; height: 400px; object-fit: cover; border-radius: 3px;}
.iGridHead{color: var(--black); font-size: 150%; font-weight: 500; margin-bottom: 10px;}
.iGridBtn{color: var(--green); background: var(--white); transition: 300ms ease; padding: 8px 20px; border-radius: 30px; font-size: 80%; width: 130px; cursor:pointer; outline: none; border: none; border: 2px solid var(--green); font-weight: 600;}
.iGridBtn:hover{background: var(--green); color: var(--white)}

.intExpTxt{height: 60vh; background:var(--black); display: grid; place-items: center;}
.ietUl{display: flex; align-items: center; justify-content: space-evenly; list-style: none; width: 100%; height: 100%}
.ietLia{font-weight: 600; color: var(--lightBlack); transition: 300ms ease; font-size: 35px}
.ietLia:hover{color: var(--white)}

/* ================== MEDIA QUERIES ================== */
@media (max-width: 800px){
    .navGrp{padding-right: 0; width: 40%}
    .navML{display: none}
    .intExpTxt{height: auto}
    .ietLia{font-size: 30px}
    .ietUl{display: grid; grid-template-columns: 1fr; place-items: center; padding: 80px 0; grid-gap: 70px}
    .nav.fixed .navLia.active, .nav.home .navLia.active{color: var(--white)}
    .nav.home .navLia{color: var(--lightBlack)}
    .bkLeft{width: 100%; border: none; box-shadow: none; padding: 0; margin: 20px auto;}
    .bottomSheet{position: absolute; bottom: 0; left: 0; border-radius: 0; border-top-right-radius: 20px; border-top-left-radius: 20px; animation: fadeSlideIn 300ms ease; padding-bottom: 40px;}
    .sideBar.sbFrm{position: fixed; bottom: 0; left: 0; height: auto; z-index: 5; background: var(--white); width: 100%}
    .sbFormDiv{width: 100%; display: grid; grid-template-columns: 60% 40%}
    .sbFormDiv.ssbFD, .fullScreenGallery{grid-template-columns: 1fr 1fr;}
    .sbTxtWrap{padding: 0; border: none; display: flex; flex-direction: column; justify-content: center; }
    .sbHead{font-size: 110%}
    .sbPrice{font-size: 65%; margin-top: 3px}
    .sbBtn{margin: 0}
    .page.pg1{margin-top: 0}
    .blog{padding: 20px 30px}
    .blogHead{font-size: 120%; line-height: 20px}
    .blogHead.pHead{font-size: 170%; line-height: 28px;}
    .blogWrap{margin-top: 0; grid-gap: 0}
    .pageDetails, .pBtm{padding: 15px}
    .pageHead{font-size: 160%; line-height: 28px; margin-bottom: 5px;}
    .pageTitle{padding: 10px 15px; border-bottom: var(--border); }
    .galClose{top: 5px; right: 5px}
    .pGallery{height: auto; order: -1}
    .galleryGrid, .rGalGrid{display: flex; overflow-x: scroll; flex-wrap: nowrap; grid-gap: 2; border-radius: 0;}
    .galleryImg, .rGalImg{flex: 0 0 100%; height: 200px; border-radius: 0;}
    .roomTile{border: none; border-radius: 0; margin-bottom: 15px;}
    .roomTile:not(:last-of-type), .blog:not(:last-of-type){border-bottom: var(--border); }
    .tsDiv.cuDiv{padding: 40px 0; height: auto;}
    .cuInpsDiv, .roomsTilesWrap, .roomTile, .pageDetails, .blogWrap, .bookingGrid, .intGrid{grid-template-columns: 1fr;}
    .intGrid{grid-gap: 30px; margin-top: 50px}
    .iGridDiv{border-radius: 3px; border: var(--border); padding-bottom: 20px;}
    .roomsTilesWrap{padding: 40px 0 0 0}
    .otTitle, .otName{text-align: center;}
    .otName{font-size: 25px}
    .otPText{font-size: 85%}
    .otImg{margin-bottom: 15px}
    .ucwsWrap{display: flex; flex-wrap: nowrap; overflow-x: scroll;  margin: 10px auto;}
    .ucWorkShop{flex: 0 0 96%}
    .ucwsWrap.medCov .ucWorkShop{grid-template-columns: 1fr; width: 98%}
    .pageText{font-size: 85%}
    .ytVideo{width: 100%; margin-bottom: 25px}
    .medCovText{font-size: 85%}
    .moWrap, .otDiv{grid-template-columns: 1fr; grid-gap: 15px}
    .otDiv{padding: 0; grid-gap: 0}
    .pageContainer{padding: 20px 10px}
    .pageConHead{font-size: 18px; margin-bottom: 17px}
    .pageTop{height: auto; }
    .pageTop::after{display: none}
    .pageTopHead{position: relative; font-size: 28px; color: var(--black); margin-top: 15px; bottom: 5px; text-align: center; font-weight: bold; left: 0}
    .pageTopHead::after{content:''; position: absolute; bottom: -8px; left: 50%; height: 8px; width: 8px; background: var(--green); border-radius: 50%; transform: translateX(-50%); z-index: 2; border: 4px solid var(--bg)}
    .pageTopHead::before{content:''; position: absolute; bottom: -1px; left: 0; height: 1px; width: 100%; background: #ccc; transform: scaleX(.2); z-index: 1}
    .pageTopHead1{font-size: 28px; position: relative; left: 0; text-align: center; color: var(--textBlack); margin-top: 35px; font-weight: bold}
    .pageTopImg{height: 30vh}
    .heroLi{font-size: 120%}
    .stTop{padding: 5px; font-size: 90%}
    .stTop.isFFrm{display: none}
    .menuBar{display: block; font-size: 150%; margin-top: -4px}
    .ulWrap{position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; background: rgba(0,0,0,.3); display: none; }
    .ulWrap.show{display: block; z-index: 14}
    .navUl{flex-direction: column; background:var(--white); height: 100vh; width: 80vw; position: fixed; top: 0; left: -100vw; overflow-y: scroll; align-items: flex-start; }
    .navUl.show{left: 0; animation: slideLeft 200ms ease; z-index: 15;}
    .navLi, .navLia{display: block; width: 100%; }
    .navLia{font-size: 100%; padding: 15px 25px; font-weight: 500; color: var(--lightBlack); text-transform: capitalize; letter-spacing: 0;}
    .navLi:not(:last-child){border-bottom: 1px solid #f3f3f3}
    .navLia:hover{background: #eee}
    .navLia.active{border-radius: 0;}
    .mobLi{display: block}
    .navLogo{height: 60px}
    .nav{padding: 10px 15px}
    .navLogo{height: 50px}
    .introDiv{text-align: left; margin-left: 25px}
    .introHead{font-size: 60px; line-height: 55px; text-align: left; margin-bottom: 20px}
    .heroUl{justify-content: flex-start;}
    .introP{font-size: 20px; margin-top: 35px}
    .indContainer{grid-template-columns: 1fr; width: 100%; grid-gap: 10px; min-height: auto; max-width: 100vw; overflow-x: hidden; padding: 40px 0;}
    .conDiv{padding: 15px 25px;}
    .galDiv{order: 2}
    .conImg{height: 200px; width: 100vw}
    .conImgDiv{order: -1}
    .conHead{font-size: 150%; line-height: 28px}
    .tsP{text-align: center; font-size: 80%}
    .fCredit{font-size: 60%}
    .footLia{font-size: 50%}
    .nlForm{display: block}
    .nlInput, .nlBtn{padding: 10px 15px}
    .nlBtn{padding: 10px 20px; margin-top: 8px}
    .nlDiv{padding: 20px 10px}
    .fLogo{height: 50px; margin-top: 25px}
    .nlP{font-size: 50%}
    .medLink{height: 35px; width: 35px; font-size: 100%}
    .footUl, .fUl{margin: 0}
    .fLia{padding: 0 5px}
    .footUl{flex-direction: column;text-align: center;}
    .footLia{font-size: 70%}
    .conP{font-size:75%}

    .hero_{height:35vh}
    .ps_btn{height:20px;width:20px;transition:300ms ease;border-radius: 50%;z-index:2;outline:none;border:none;cursor:pointer;font-size:80%;display:grid;place-items: center;margin-top: 20px;position:relative;display: none;}
    .image_carousel{overflow: hidden;}
    .image_slider{margin:32px auto;width:88%}
    .about_section{margin:32px auto;width:80%;text-align: center;line-height: 150%;font-size: 70%;}
    .about_section h2{margin-bottom: 0px;}

}

@keyframes slideIn1{
    0%{top: -100px}
    100%{top: 0}
}
@keyframes slideLeft {
    0%{left: -100vw}
    100%{left: 0}
}
@keyframes pop {
    0%{transform: scale(0)}
    40%{transform: scale(1.05)}
    60%{transform: scale(.95)}
    100%{transform: scale(1)}
}
@keyframes slideFadeIn {
    0%{bottom: -100vh; opacity: 0}
    100%{bottom: 0; opacity: 1}
}
@keyframes pulse {
    0%{transform: scale(0);}
    40%{transform: scale(1);}
    60%{transform: scale(1);}
    100%{transform: scale(0);}
}
@keyframes fadeSlideIn {
    0%{opacity: 0; bottom: -100vh}
    100%{opacity: 1; bottom: 0}
}
@keyframes slideIn {
    0%{opacity: 0; margin-bottom: -150px}
    100%{opacity: 1; margin-bottom: 0}
}