@import url('https://fonts.googleapis.com/css2?family=Changa:wght@200..800&display=swap');


body{background-color: #1a1a1a!important;}
body,p,li,a,button{ font-family: "Roboto", sans-serif;}
a{text-decoration: none!important;}
p{color: white;}
h1,h2,h3{font-family: "Changa", sans-serif;}
section{background-color: #1a1a1a; padding: 4rem 0;}

.heading-wrapper{display: flex; justify-content: center; padding-bottom: 4rem;}
.sec-heading{text-align: center; padding:0 1rem; text-transform: capitalize; position: relative; display: flex;}
.sec-heading span{color: white;}
.sec-heading::before{content: " "; background-color: #fbaf17; height: 2px; left: 0; position: absolute; right: 0;  top: 50%;    }


.btn-yellow{display: inline-block; padding: 15px 27px; text-decoration: none; color: white; background-color: #fbaf17; font-weight: bold; font-size: 16px; border-radius: 5px;}
.btn-yellow:hover{color: #fbaf17; background-color: white; transition:ease-in 0.3s;}

.header{ width: 100%; z-index: 100; background-color: #1a1a1a; padding: 0.5rem 0;}
.header .nav-sec{ align-items: center;}
.header .nav-bar{ display: flex; justify-content:end; align-items: center; }
.header .nav-bar ul li{ padding: 30px 20px;} 
.header .nav-bar ul li a{ color: white; text-decoration: none; font-size: 16px; font-weight: 300;}
.header .nav-bar ul li a:hover{color: #fbaf17;}
.header .logo img{width: 7rem;}

.header .nav-mob{display: none;}
.header .nav-mob button{ font-size: 1.5rem; background-color: transparent; border: none;}
.header .nav-mob button span i{color: white;}
.header .nav-mob ul{padding-left: 20px; padding-top:30px ;}
.header .nav-mob ul li{padding-bottom: 15px;}
.header .nav-mob ul li a{color:white; font-size: 18px; text-decoration: none; padding: 1rem 0; }

.header .offcanvas{background-color: rgb(10 25 46); width: 86%;}
.header .offcanvas button{color: white !important;}
.header .offcanvas-header{justify-content: space-between; background-color:rgba(2, 3, 3, 0.25) }
.header .offcanvas-header img{width: 30px;}

.hero-sec{padding: 0;}
.hero-sec img{ width: 100%; height: 90vh;}

.bio {padding-top: 8rem;}
.bio .img-sec{display: flex; justify-content: center;}
.bio .img-wrapper{display: inline-block; position: relative;}
.bio .img-wrapper::before{content: " "; border: 2px solid #fbaf17; position: absolute; height: 100%; width: 100%; left: -45px; top: -40px;}
.bio img{position: relative;}


.bio .row{ align-items: center;}
.bio .heading-wrapper{justify-content: left;}
.bio h2{ color: #fbaf17;}
.bio h3{font-size: 20px; text-transform: uppercase; color: white;}

.testimonial{ background-color: #1a1a1a; padding-bottom: 8rem;}
.testimonial h2{color: #fbaf17; font-size: 20px; padding-top: 3rem; text-transform: uppercase;}
.testimonial .row{justify-content: center; text-align: center;}
.testimonial img{height: 30px;}

.l-new{padding-top: 8rem;}
.l-new img{width: 100%; height: 200px; object-fit: cover;}

.l-rel {padding-bottom: 9rem; text-align: center; }
.l-rel a{ color: white; padding: 1rem 2rem; font-size: 12px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; background-color: #484747; margin-top: 4rem; border-radius: 5px; display: inline-block;}
.l-rel a:hover{color: rgb(206, 67, 67);}
.booking{ background-image: url("./images/new3.jpg"); background-repeat: no-repeat; background-size: cover; padding-bottom: 10rem;}
.booking .heading-wrapper{padding-bottom: 1rem;}
.booking .sec-content{ justify-content: right; text-align: center;}
.booking .sec-content form {text-align: center;}
.booking .sec-content form ::placeholder{color: white;}
.booking .sec-content form .form-control{background-color: transparent; border: 1px solid white; color: white; padding: 1rem; margin-bottom: 1rem;}
.booking .btn-yellow{text-align: center; border: none; font-size: 1rem; margin-top: 3rem;}
  
.parallax { background-image: url("./images/piaho.jpg"); height: 100%; background-attachment: fixed;  background-position: center;background-repeat: no-repeat;background-size: cover;padding: 0;position: relative;}
.parallax::before{ position: absolute;content: "";height: 100%;width: 100%;background: #141517; opacity: 0.7; z-index: 0;  }
.parallax .row{justify-content: center;}
.parallax .row iframe{width: 700px; height: 600px; padding: 8rem 0; z-index: 100;}

.footer {background-color: #1a1a1a; margin-top: 8rem; padding-top: 2rem; border-top: 2px solid #fbaf17; }
.footer .row{justify-content: space-between; padding-bottom: 4rem;}
.footer .social-icons{ display: flex; justify-content: center;}
.footer .social-icons span{ margin-right: 0.6rem;}
.footer .social-icons span i{color:#fbaf17; font-size: 2rem;}
.footer .social-icons span i:hover, .footer h2 a:hover{color:white;}
.footer .copyright-bar{ background-color: #1a1a1a; padding: 20px 0px;}
.footer .copyright-bar p{ text-align: center; margin: 0; font-size: 14px;}




@media only screen and (max-width: 786px){
    section{padding: 1rem 0;}
    .header .nav-bar {display: none;}
    .header .nav-mob {display: block; text-align: end;}
    .hero-sec img{height: 100%;}
    .bio{padding-top: 2rem;}
    .bio .heading-wrapper{padding-bottom: 1rem; justify-content: center;}
    .bio .img-wrapper::before{display: none;}
    .bio img{width:100%; height: 500px; padding-top: 2rem;}
    .bio .row{flex-direction: column-reverse;}
    .l-new{padding-top: 4rem;}
    .l-new img{margin-bottom: 2rem;}
    .l-rel{padding-bottom:4rem ;}
    .testimonial img{width:60% ; }
    .testimonial {padding: 3rem 0;}
}























    /* SM MENU  */

    @media (min-width: 768px) {

        /* Switch to desktop layout
        -----------------------------------------------
        These transform the menu tree from
        collapsible to desktop (navbar + dropdowns)
        -----------------------------------------------*/
        /* start... (it's not recommended editing these rules) */
        .sm-menu ul{position:absolute;width:12em;}
        .sm-menu li{float:left;}
        .sm-menu.sm-rtl li{float:right;}
        .sm-menu ul li,.sm-mytheme.sm-rtl ul li,.sm-mytheme.sm-vertical li{float:none;}
        .sm-menu a{white-space:nowrap;}
        .sm-menu ul a,.sm-mytheme.sm-vertical a{white-space:normal;}
        .sm-menu .sm-nowrap > li > a,.sm-mytheme .sm-nowrap > li > :not(ul) a{white-space:nowrap;}
        /* ...end */
    
    
        /* Your rules to style the menu in desktop view here... */
    }