html, body {
    margin: 0;
    padding: 0;
    color: #585859;
    font-family: "Kanit", "Helvetica Neue", Helvetica, Arial, "Microsoft YaHei", "Microsoft YaHei Light", "MS Mincho", "BrowalliaUPC", sans-serif;
}
:root {
    --gold-color: #b3a258;
}
.avc-btn {
    border: 1px solid var(--gold-color);
    padding: 10px;
    text-decoration: none;
    background-color: var(--gold-color);
    color: white;
    cursor: pointer;
    border-radius: 3px;
    font-size: 0.9em;
    /* box-shadow: 0 2px 25px rgba(0, 0, 0, 0.5); */

}
.animated {
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
   
.animated.infinite {
    animation-iteration-count: infinite
}
   
.flash {
    animation-name: flash
}
@keyframes flash {
    0%,
    100%,
    50% {
      opacity: 1
    }
   
    25%,
    75% {
      opacity: 0.4
    }
  }

.link {
    color: var(--gold-color);
    text-decoration: none;
}
.main {
    display: grid;
    grid-template-rows: 4;
    grid-template-columns: 1fr;
    position: relative;
}

.logo {
    background-color: var(--gold-color);
    text-align: center;
    position: fixed;
    width: 100%;
    z-index: 1;
    transition: background-color 1.5s ease;
}
.logo-scroll {
    background-color: #090909;
    opacity: 0.9;
}
.logo > img {
    height: 70px;
    width: auto;
}
.header {
    color: var(--gold-color);
    text-align: center;
    padding-top: 8%;
    /* background-color: #000; */
    opacity: 0.8;
    /* border-radius: 5px; */
    font-size: 1.4em;
    font-weight: bold;
}
.cover {
    display: grid;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    background-image: url(https://privileges.anantaravacationclub.com/assets/images/property/anantara-vacation-club-mai-khao-phuket/phase3-Two-Bedroom-Villa-Dining-Living-1-1920x1080.jpg);
    background-size: cover;
}
.destination__header {
    font-size: 1.2em;
    color: var(--gold-color);
    font-weight: bold;
    margin-bottom: 10px;
}
.content {
    margin: 0 6%;
}
table {
    border-collapse: collapse;
    width: 100%;
    /* text-transform: uppercase; */
}
.table, table tr td {
    border: 1px solid #000;
}

.resort-name {
    background-color: var(--gold-color);
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 1.2em;
    padding: 5px 0;

    /* padding: 10px; */
    /* width: 600px; */
}
.stay-length {
    text-align: center;
    color: #fff;
    background-color: black;
    padding: 5px;
    font-size: 0.8em;
    height: 45px;
}
.stay-length-day {
    text-align: center;
    color: #fff;
    background-color: var(--gold-color);
    padding: 5px;
    font-size: 0.8em;
}

.footer {
    /* text-align: center; */
    margin-top: 40px 0;
    padding: 40px 0;
    /* height: 50px; */
    background-color: #efefef;
}
.container-footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1;
    column-gap: 5px;
    margin: 0 6%;
}
.footer-header {
    font-weight: bold;
    font-size: 0.8em;
}
.footer-details {
    font-size: 0.8em;
}
.contact-us {
    border: 0 solid red;
}
.social {
    border: 0 solid red;
}
.social > ul {
    margin: 0;
    padding: 0;
}
.social > ul > li {
    list-style-type: none;
    float: left;
    margin-right: 2px;
}

.mobile-app {
    border: 0 solid red;
}
.mobile-app > ul {
    margin: 0;
    padding: 0;
}
.mobile-app > ul > li {
    list-style-type: none;
    float: left;
    margin-right: 5px;
}

.list > ul > li {
    text-indent: -9px;
    padding-left: 0px;
}
.img-fluid {
  width: 100%;
  height: auto;
}
.term {
    background-color: #dedede;
}
.book-now {
    padding: 5px;
    margin-top: 10px;
    text-align: center;
    
    /* border: 1px solid black; */
}
.container-grid-one {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 32px 400px auto auto auto auto auto auto auto auto auto auto auto auto auto auto 25px;
    /* 25px minmax(25px, 1fr) minmax(25px, 1fr) minmax(25px, 1fr) minmax(25px, 1fr) minmax(25px, 1fr) minmax(25px, 1fr) minmax(25px, 1fr) minmax(25px, 1fr) minmax(25px, 1fr) minmax(25px, 1fr) minmax(25px, 1fr) minmax(25px, 1fr) minmax(25px, 1fr) minmax(25px, 1fr) minmax(25px, 1fr) 25px */
    grid-template-areas: 
    "row1 row1 row1"
    "row2 row2 row2"
    "row3 row3 row3"
    "row4 row5 row6"
    "row7 row8 row9"
    "row10 row10 row10"
    "row11 row12 row13"
    "row14 row15 row16"
    "row17 row17 row17"
    "row18 row18 row18";
    /*  */
}
.grid-row-1 { grid-area: row1; }
.grid-row-2 { grid-area: row2; }
.grid-row-3 { grid-area: row3; display: grid; align-items: center;}
.grid-row-5 { grid-area: row5; }
.grid-row-6 { grid-area: row6; }
.grid-row-7 { grid-area: row7; }
.grid-row-8 { grid-area: row8; }
.grid-row-9 { grid-area: row9; }
.grid-row-10 { grid-area: row10; align-items: center; font-size: 1.2em;}
.grid-row-11 { grid-area: row11; }
.grid-row-12 { grid-area: row12; }
.grid-row-13 { grid-area: row13; }
.grid-row-14 { grid-area: row14; }
.grid-row-15 { grid-area: row15; }
.grid-row-16 { grid-area: row16; }
.grid-row-17 { grid-area: row17; }
.grid-row-18 { grid-area: row18; }


.borderLT { border-left: 1px solid black; border-top: 1px solid black; }
.borderLTB { border-left: 1px solid black; border-top: 1px solid black; border-bottom: 1px solid black; }
.borderLTR {border-left: 1px solid black; border-top: 1px solid black; border-right: 1px solid black;}
.borderLTRB {border: 1px solid black; }

.container-destination {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 32px minmax(380px, 1fr) 30px;
    grid-template-areas: 
    "header header"
    "left right"
    "footer footer";
    padding-bottom: 20px;
}
.grid-header {
    grid-area: header;
    /* border: 1px solid black; */
}
.grid-left {
    grid-area: left;
    /* border: 1px solid black; */
}
.grid-right {
    grid-area: right;
    /* border: 1px solid black; */
}
.grid-footer {
    grid-area: footer;
    /* border: 1px solid black; */
}
@media only screen and (max-width: 600px) {
    .header {
        color: var(--gold-color);
        text-align: center;
        padding-top: 20%;
        /* padding: 5% 5%; */
        /* background-color: #000; */
        opacity: 0.8;
        /* border-radius: 5px; */
        font-size: 0.9em;
        font-weight: bold;
        width: 90%;
    }
    .content {
        margin: 0 2px;
    }
    .container-destination {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 32px minmax(300px, 1fr) minmax(100px, 1fr) 30px;
        grid-template-areas: 
        "header"
        "left"
        "right"
        "footer";
    }
    .destination {
        margin-bottom: 10px;
        display: grid;
        row-gap: 10px;
        grid-template-rows: 2;
        grid-template-columns: 1fr;
    }
    .resort-name {
        background-color: var(--gold-color);
        /* text-align: center; */
        color: #fff;
        padding: 5px 0;
        font-size: 0.9em;
        /* padding: 5px 0; */
    }
    .stay-length {
        text-align: center;
        color: #fff;
        background-color: black;
    }
    .container-footer {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 3;
        row-gap: 10px;
        margin: 0 6%;
    }
    .list > ul {
        padding-left: 15px;
    }
}