/*Global Styles and Header*/

:root{
    --accent-color: #e7ae1f;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
}

body {
    width: 100%;
}

/*Headings & Paragraph Styles*/

h1{
    text-align: center;
    font-size: 3rem;
    font-weight: bold;
    padding-bottom:20px;
    color: whitesmoke;
}

h2{
    font-size: 2.2rem;
    padding: 10px 0 20px 0;
    color: var(--accent-color);
    text-align: center;
    }

h3{
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: var(--accent-color);
    text-align: center;
}

h4{
    font-size: 1.6rem;
    margin-bottom: 10px;
    color: whitesmoke;
    text-align: center;
    font-weight: normal;
}

h5{
    font-size: 1.9rem;
    color: whitesmoke;
    margin: 10px 0;
}

p {
    font-size: 1.6rem;
    color: whitesmoke;
    line-height: 1.3;
    -webkit-text-size-adjust: 100%;
}

.para-feature{
    color: var(--accent-color);
    font-weight: bold;
    line-height: 1.7;
}

.para-feature2{
    color: var(--accent-color);
    font-weight: bold;
    text-align: center;
    font-style: italic;
}

.container{
    width: 95%;
    margin: auto;
}

/*Navigation Bar*/

header {
    background: rgba(0,0,0,.75);
    height:50px;
    width: 100%;
    position: fixed;
    /*align-items: center;*/
    z-index: 100;
}

#logo{
    height: 40px;
    margin-right: 20px;
}

#header-text {
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 40%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}

#header-text-mobile{
    display: none;
}

.promo-text{
    color: var(--accent-color);
    font-size: 2.2rem;
    padding-bottom:0;
}

nav{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 8px 20px;
}

nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

nav ul.show{
    display: flex;
}

nav ul li {
    display: inline-block;
    list-style: none;
    font-size: 1.6rem;
    padding-left: 12px;
    font-weight: 500;
    text-decoration: none;
    color: whitesmoke;
    cursor: pointer;
}

a,
a:visited,
a:active {
    color: whitesmoke;;
}

li a,
li a:visited,
li a:active {
    font-size: inherit;
    font-weight: 500;
    text-decoration: none;
    color: #ebf5e9;
}

#book-link{
    color: var(--accent-color);
    font-weight: bold;
}

#book-link:hover,.link:hover{
    color: #9a7a28;
    transform: translate(0%, 6%);
}

/*Background Image & Main Content*/

#background{
    position:fixed;
    background-image: url("../images/banner.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    z-index: -10;
}

#front-page{
    height: 100vh;
}

#banner-top{
    height: 50vh;
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
}

#left-banner-txt, #right-banner-txt{
    width: 30%;
}
.banner-txt{
    text-align: center;
    color: whitesmoke;
    font-weight: normal;
    font-size: 3.2rem;
    padding:0 10px;
}

.banner-txt-mobile{
    display:none;
}

#banner-bottom{
    /*height: 50vh;*/
    width:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.yellow-heading{
    color: var(--accent-color);
}

#main-heading{
    font-size: 3rem;
    margin-top: 80px;
}

#video-container{
    width: 60%;
    display: flex;
    justify-content: center;
    margin: 0 auto 30px auto;
}

.section{
    position: relative;
    width: 100%;
    height:auto;
    min-height:30vh;
    background-color: black;
    padding:40px 0;
}

.break{
    width: 100%;
    height:60px;
    background-color: transparent;
}

#terpeca-badges{
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 20px;
    margin: 0 auto;
    background-color: black;
}

#terpeca-img{
    max-width: 80%;
}

/* Room Sliders */

#room-heading{
    padding-top:10px;
}

#room-slider{
    width:100%;
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.arrow{
    border: none;
    background: transparent;
    color: whitesmoke;
    font-weight: bold;
    font-size: 4rem;
    height:30px;
    width:30px;
    padding-right: 20px;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.3s ease;
}

#left-arrow:hover, #right-arrow:hover {
  transform: translateX(-5px);
  color: var(--accent-color);
}

#right-arrow:hover {
  transform: translateX(5px);
  color: var(--accent-color);
}

#room-left{
    background-image: url("../images/room-1.jpg");
}

#room-right{
    background-image: url("../images/room-3.jpg");
}

#room-main {
    background-image: url("../images/mainroom-2.jpg");
    background-size: cover;
    width: 36%;
    height: 0;
    padding-bottom: 36%;
    border-radius: 20px;
}

.text-main {
    width: 36%;
    padding: 0 10px 10px 10px;
    border-radius: 20px;
}

#room-text-1{
    display: none;
}

#room-text-2{
    display: none;
}

#room-text-3{
    display: none;
}

#room-text-4{
    display: none;
}

#room-text-5{
    display: none;
}

.room-feature{
    color: var(--accent-color);
    text-decoration: none;
    list-style: none;
    padding-right: 15px;
    text-align: center;
}

#room-left, #room-right{
    background-size: cover;
    width: 28%;
    height: 0;
    padding-bottom: 21%;
    border-radius: 10px;
    box-shadow: 10px 10px 20px 0 black inset, -10px -10px 20px 0 black inset;
}

/*Format Buttons*/

.button-container{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button, .button-rec {
    text-align: center;
    cursor: pointer;
    font-size: 1.7rem;
    margin: 20px 10px;
    background: #111;
    position: relative;
    z-index: 0;
}

.button, .button a{
    width: 85px;
    height: 85px;
    color: var(--accent-color);
    border-radius: 50%;
}

.button:before {
    content: '';
    background: linear-gradient(45deg, #d7a845, #cbb029, #d26525, #c79460);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    opacity: 1;
    animation: glowing 20s linear infinite;
    transition: opacity .3s ease-in-out;
    border-radius: 50%;
}

.button:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #111;
    left: 0;
    top: 0;
    border-radius: 50%;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

.button a, .button-rec a{
    height: 100%;
    width: 100%;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.button a:hover, .button-rec:hover, .button-rec a:hover{
    color: black;
    background: var(--accent-color);
}

.button-rec{
    color: whitesmoke;
    /*font-size: 1.8rem;*/
    height: 38px;
    width: 110px;
    border-radius: 10px;
    border: solid #9a7a28 1px;
 }

.button-rec a:hover{
    border-radius: 10px;
}

/*Why Choose Eclipse*/

#why-eclipse-container{
    display: flex;
    justify-content: center;
    align-items: center;
}

#lobby-img{
    background-image: url("../images/lobby.jpg");
    background-size: cover;
    width: 30%;
    height: 410px;
    margin-right: 35px;
    border-radius: 15px;
    box-shadow: 10px 10px 20px 0 black inset, -10px -10px 20px 0 black inset;
}

#why-eclipse-text{
    width: 68%;
}

.heading-left{
    text-align: left;
}

.para-ctr {
    text-align: center;
    line-height: 1.4;
}

table{
    font-size: 1.6rem;
    margin:auto;
    min-width:30%;
    max-width:100%;
}

th{
    height:2.4rem;
    color: var(--accent-color);
    text-align: left;
}

tr{
    height: 2.1rem;
}

td{
    text-align: left;
    color: whitesmoke;
}

.tblheading{
    text-align: center;
}

.voucher-container{
    display: flex;
    align-items: center;
    flex-direction: column;
}

#voucher-button {
    margin:auto;
}

/*Venue Section*/

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

#address-info{
    display: block;
    margin-right: 40px;
}

.mapouter{
    text-align:right;
    height:400px;
    width:400px;
    max-width:100%;
}

.gmap_canvas {
    overflow:hidden;
    background:none;
    height:380px;
    width:380px;
    max-width: 100%;
}

iframe{
    border: none;
}

/*FAQ Section*/

#faq-section{
    padding-right: 30px;
}

.faq-item {
  border-bottom: 1px solid #464545;
  padding: 10px 0;
}

.faq-question{
    background-color: transparent;
    border: none;
    cursor: pointer;
    width: 100%;
    color: whitesmoke;
    text-align: left;
    font-size: 2rem;
    display:flex;
    align-items: center;
    justify-content: space-between;
}

.faq-question:hover, .faq-question.active{
    color: var(--accent-color);;
}

.faq-question.active.question-icon{
    content: "-";
}

.question-icon{
    font-size: 2.5rem;
    padding-left:15px;
}

.faq-answer{
    font-size: 1.6rem;
    padding:10px 20px 10px 0;
    display: none;
}

/*Contact Form*/

#contact-section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.phone-email{
    font-size: 2.4rem;
    padding: 0;
}

#phone-no{
    font-size: 2.4rem;
    font-weight: bold;
    padding: 10px ;
}

.contact-form{
    width: 50%;
}

#footer-anchor{
    height:10px;
}

.footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    /* height: 50px; */
    padding: 10px;
    margin-bottom: 10px;
}

.copyright{
    display: flex;
    align-items: center;
}

.footer-text{
    font-size: 1.4rem;
    color: whitesmoke;
}

.social{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social-icon{
    height: 3rem;
    padding-left: 8px;
}

.temp{
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

.hamburger{
    display: none;
    background-color: transparent;
    color: white;
    font-size: 2.5rem;
    border: 0;
    cursor: pointer;
}

/*Media Queries*/

@media screen and (max-width: 1200px) {

    h1 {
        font-size: 2.6rem;
    }

    h2{
        font-size: 1.9rem;
    }
    header{
        height: 70px;
        background: rgba(0,0,0, 0.85)
    }

    nav {
        justify-content: center;
    }

    #logo{
        height: 30px;
    }

    #header-text{
        display: none;
    }

    #header-text-mobile{
        background: black;
        height: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        position: relative;
        padding: 10px 0;
    }

    .promo-text{
        color: var(--accent-color);
        padding-top: 5px;
        font-size: 1.6rem;
    }

    nav ul{
        display: none;
        flex-direction: column;
        width: 100%;
    }

    nav ul.show{
        display: flex;
        margin: 20px 0;
        border-top: #e5b53a 2px solid;
        border-right: #e5b53a 2px solid;
        border-left: #e5b53a 2px solid;
        background-color: black;
    }

    nav ul li {
        width: 100%;
        border-bottom: #e5b53a 2px solid;
        font-size: 1.8rem;
        padding: 20px 0 1.2rem 1.2rem;
    }

    #background{
        background-image: url("../images/banner-mobile.jpg");
    }

    .hamburger{
        display: block;
    }

    #main-heading{
        font-size: 2.6rem;
    }

    #left-banner-txt, #right-banner-txt, #room-left, #room-right{
        display: none;
    }

    #banner-top {
        height: 35vh;
    }

    .banner-txt-mobile{
        display: block;
        font-size: 2rem;
    }

    #video-container{
        width: 100%;
    }

    #room-main{
        width: 90%;
        padding-bottom: 90%;
    }

    .text-main{
        width: 90%;
    }

    #why-eclipse-container{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #lobby-img{
        background-image: url("../images/lobby-mobile.jpg");
        width: 100%;
        margin-right: 0;
    }

    #why-eclipse-text{
        width: 90%;
    }

    .heading-left{
        text-align: center;
    }

     table{
         width:90%;
         justify-self: center;
    }

    #venue-container{
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
    }

    #address-info{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 0 0 20px 0;
    }

    .mapouter{
        text-align: center;
        margin: 0 auto;
    }

    .contact-form{
        width: 90%;
    }

}