/* =========== AURORA CABINS STYLES =========== */

/* =========== General Styles =========== */

body {
    margin: 0;
    background-color: #DDDDDD;
    color: #222222;
    font-family: Montserrat, Arial, Helvetica, sans-serif;
}

main {
    width: 100%;
    max-width: 992px;
    margin: 0 auto;
    background-color: white;
    position: relative;
}

a {
    text-decoration: none;
}

.clear {
    clear: both;
}

/* ---------- Header ---------- */

header {
    width: 100%;
    height: 85px;
    z-index: 10;
}

/* ---------- Logo ---------- */

.logo-section {
    width: 25%;
    height: 85px;
    float: left;
    padding: 18px 0 0 40px;
    box-sizing: border-box;
}

.logo-image {
    width: 150px;
    height: auto;
    display: block;
    margin-right: 10px;
}


/* ---------- Navigation ---------- */

.navigation-box {
    margin-right: 40px;
}

nav {
    width: 60%;
    height: 85px;
    float: right;
    text-align: right;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav li {
    display: inline-block;
    margin: 30px 1.2%;
}

.menu-link {
    color: #222222;
    font-size: 12px;
    letter-spacing: 1px;
}

/* ---------- Common Page Title ---------- */

.page-title {
    text-align: center;
    margin: 5px 0 30px 0;
}

.page-title h1 {
    margin: 0 0 8px 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 34px;
    font-weight: normal;
    line-height: 1.1;
}

.page-title p {
    margin: 0;
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #666666;
    letter-spacing: 0.3px;
}

/* ---------- Common Cabin Cards Styles ---------- */

.cabin-card {
    width: 23.7%;
    margin-right: 1.33%;
    float: left;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
}

.cabin-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    object-fit: cover;
}

/* ---------- Buttons ---------- */

.button {
    display: inline-block;
    background-color: #29402D;
    color: white;
    border-radius: 4px;
    padding: 14px 25px;
    font-size: 12px;
    letter-spacing: 1px;
}

.button:hover {
    background-color: #18271C;
}

/* ---------- Footer ---------- */

footer {
    width: 100%;
    background-color: #1E3221;
    color: white;
    padding: 40px 0 0 0;
}

.footer-content {
    width: 92%;
    margin: 0 auto;
}

/* ---------- Footer Columns ---------- */

.footer-brand {
    width: 19%;
    float: left;
}

.footer-explore, .footer-company {
    width: 16%;
    float: left;
}

.footer-contact {
    width: 28%;
    float: left;
}

.footer-social, .footer-plan {
    width: 21%;
    float: left;
}

/* ---------- Footer Text ---------- */

.footer-column h2 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 20px;
    font-weight: 100;
    letter-spacing: 3px;
}

.footer-column h3 {
    margin: 5px 0 18px 0;
    font-size: 11px;
}

.footer-column a {
    display: block;
    margin-bottom: 14px;
    color: #DDDDDD;
    font-size: 12px;
}

.footer-column p {
    margin: 0 0 15px 0;
    color: #DDDDDD;
    font-size: 12px;
    line-height: 1.5;
}

/* ---------- Stay in Touch ---------- */

.email-box {
    width: 90%;
    height: 40px;
    background-color: white;
    border-radius: 3px;
}

.email-input {
    width: 70%;
    height: 40px;
    float: left;
    padding-left: 12px;
    border: none;
    background-color: transparent;
}

.email-button {
    width: 20%;
    height: 40px;
    float: right;
    border: none;
    background-color: transparent;
    font-size: 18px;
}

/* ---------- Follow Us ---------- */

.social-link {
    display: inline-block;
    margin-right: 15px;
}

.social-link img {
    width: 25px;
    height: 25px;
    display: block;
}

/* ---------- Footer Bottom ---------- */

.footer-bottom {
    margin-top: 35px;
    padding: 20px 4%;
    background-color: #172719;
}

.signature {
    float: left;
    font-size: 11px;
}

.footer-links {
    float: right;
}

.footer-links a {
    display: inline;
    margin-left: 25px;
    color: #DDDDDD;
    font-size: 11px;
}

/* =========== Home Page Styles =========== */

/* ---------- Header Section ---------- */

.home-page header {
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
}

/* ---------- Hero Section ---------- */

.hero {
    height: 500px;
    background-image: url("../img/hero.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-text {
    width: 40%;
    text-align: left;
    padding: 130px 0 0 100px;
}

.hero-text h1 {
    margin: 0 0 20px 0;
    font-family: Georgia, serif;
    font-size: 52px;
    font-weight: normal;
    line-height: 1.1;
}

.hero-text p {
    font-size: 15px;
    line-height: 1.6;
}

.hero-button {
    margin-top: 10px;
}

/* ---------- Featured Cabins ---------- */

.cabins {
    width: 100%;
    background-color: #F3F1ED;
    padding: 40px 0;
}


/* ---------- Section Heading ---------- */

.cabin-heading {
    width: 90%;
    height: 40px;
    margin: 0 auto;
}

.cabin-heading-left {
    width: 50%;
    float: left;
}

.cabin-heading-right {
    width: 50%;
    float: right;
    text-align: right;
}

.cabin-heading p {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
}

.cabin-heading-right a {
    color: #222222;
}

/* ---------- Cabin Cards ---------- */

.cabins-cards-section {
    width: 90%;
    margin: 0 auto;
}

.cabin-card-featured {
    border: 1px solid #D7D7D7;
}
 
.cabin-card-text {
    padding: 16px 16px 0 16px;
    min-height: 145px;
}

.cabin-card-text h2 {
    margin: 0 0 14px 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
}

.home-page .cabin-info {
    margin: 0 0 15px 0;
    font-size: 10px;
    color: #666666;
    line-height: 1.8;
}

.price {
    margin: 0 0 15px 0;
    font-size: 11px;
}

.details-link {
    color: #29402D;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1px;
}

/* ---------- Benefits Section ---------- */

.benefits {
    width: 100%;
    background-color: #E9E6E0;
    padding: 40px 0;
}

.benefit {
    width: 18.9%;
    float: left;
    min-width: 120px;
    text-align: center;
    padding: 5px 3%;
}

.benefit-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 10px auto;
    display: block;
}

.benefit h3 {
    margin: 0 0 10px 0;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 2px;
}

.benefit p {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
}

/* ---------- Testimonials Section ---------- */

.testimonials {
    width: 100%;
    padding: 45px 0;
    background-image: url("../img/testimonial.png");
    background-size: cover;
    background-position: center;
    color: white;
}

.testimonial {
    width: 27%;
    min-height: 150px;
    float: left;
    text-align: center;
    padding: 0 3%;
    border-right: 1px solid #FFFFFF5D;
}

.last-testimonial {
    border-right: none;
}

.quote {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 35px;
}

.testimonial-text {
    font-size: 13px;
}

.stars {
    letter-spacing: 3px;
}

/* =========== Cabins Page Styles =========== */

.cabins-page header {
    position: relative;
    background-color: white;
}

.cabins-page main {
    background-color: white;
}

#cabins-section {
    padding: 35px 3%;
}

/* ---------- Cabins Categories Options ---------- */

.cabin-categories {
    text-align: center;
    margin-bottom: 35px;
    padding-bottom: 15px;
}

.category-link {
     display: inline-block;
    color: #29402D;
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.3px;
    padding: 7px 13px;
    margin: 0 4px;
    border: 1px solid #294B32;
    border-radius: 15px;
    transition: all 0.2s ease;
}

.category-link:hover {
    background-color: #29402D;
    color: white;
}


/* ---------- All Cabins Section ---------- */

.all-cabin-section {
    border-top: 1px solid #D7D7D7;
    padding: 28px 0 30px 0;
}

.section-title {
    width: 70%;
    float: left;
}

.section-title h2 {
    margin: 0 0 7px 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 21px;
    font-weight: normal;
    line-height: 1.2;
}

.section-title p {
    margin: 5px 0 18px 0;
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #666666;
    line-height: 1.5;
}

.cabin-count {
    width: 20%;
    float: right;
    text-align: right;
    margin-top: 5px;
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: #666666;
}

/* ---------- Cabin Cards ---------- */

.cabin-card-list {
    margin-bottom: 24px;
    border: 1px solid #D7D7D7;
}

.cabins-page .cabin-info {
    padding: 16px 12px 17px 12px;
}

.cabins-page .cabin-info h3 {
    margin: 0 0 13px 0;
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.2px;
    line-height: 1.3;
}

.cabin-guests {
    float: left;
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #666666;
}

.cabin-price {
    float: right;
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #29402D;
    font-weight: 500;
}

.cabin-tag {
    display: inline-block;
    margin-top: 11px;
    padding: 4px 9px;
    border: 1px solid #D7D7D7;
    border-radius: 15px;
    color: #666666;
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 1.2px;
}

/* ---------- Back To Top ---------- */

.back-to-button {
    text-align: center;
    margin: 20px 0 10px 0;
    border-radius: 4px;
}
.back-to-button a {
    display: inline-block;
    border-radius: 4px;
    background-color: #29402D;
    color: white;
    padding: 12px 22px;
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1px;
}

/* =========== Experiences Page Styles =========== */

.experiences-page header {
    position: relative;
    background-color: white;
}

.experiences-box {
    width: 100%;
    margin: 0 auto;
    padding: 40px 0 0 0;
}

/* ---------- Experience Boxes ---------- */

.experience-row {
    width: 100%;
}

.experience-image {
    width: 50%;
    height: 310px;
    float: left;
}

.experience-image img {
    width: 100%;
    height: 310px;
    object-fit: cover;
    display: block;
}

.experience-text {
    width: 50%;
    height: 310px;
    float: left;
    background-color: #f3f4eb;
    text-align: center;
}

.experience-text h2 {
    margin: 0 0 13px 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 23px;
    font-weight: normal;
    line-height: 1.2;
}

.experience-text p {
    margin: 0 0 25px 0;
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.7;
}

.experience-content {
    width: 70%;
    margin: 0 auto;
    padding-top: 45px;
}

/* ---------- Experience Icon ---------- */
        
.experience-icon {
    width: 55px;
    height: 55px;
    margin: 0 auto 20px auto;
    background-color: #29402d;
    border-radius: 50%;
}
.experience-icon img {
    width: 28px;
    height: 28px;
    margin-top: 13px;
}

/* ---------- Learn More ---------- */

.link-with-arrow {
    color: #29402d;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
}

.link-with-arrow span {
    margin-left: 10px;
    font-size: 18px;
}

/* =========== Contact Page Styles =========== */

/* ---------- Get in Touch ---------- */

.contact-section {
    width: 92%;
    margin: 40px auto 42px auto;
}

.contact-info {
    width: 31%;
    float: left;
}

.contact-info h1 {
    font-family: Georgia, serif;
    font-size: 48px;
    font-weight: normal;
    line-height: 1.05;
    margin: 0 0 22px 0;
}

.contact-info > p { /* select only the <p> elements that are direct children (directly inside contact-info) */
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 34px 0;
}

.contact-detail {
    margin-bottom: 23px;
}

.contact-icon {
    width: 34px;
    height: 36.5px;
    border-radius: 50%;
    background-color: #e8e9dc;
    float: left;
    margin-right: 12px;
    text-align: center;
    line-height: 34px;
    font-size: 15px;
    color: #29402d;
}

.contact-detail p {
    margin: 0 0 0 46px;
    padding-top: 2px;
    font-size: 13px;
    line-height: 1.7;
}

/* ---------- Contact Form ---------- */

.contact-form {
    width: 31%;
    height: 425px;
    float: left;
    margin-left: 3%;
}

.form-input {
    width: 100%;
    height: 52px;
    box-sizing: border-box;
    border: 1px solid #deded6;
    border-radius: 5px;
    background-color: #fafaf7;
    padding: 0 14px;
    margin-bottom: 15px;
    font-size: 13px;
    color: #555555;
}

.message {
    width: 100%;
    height: 155px;
    box-sizing: border-box;
    border: 1px solid #deded6;
    border-radius: 5px;
    background-color: #fafaf7;
    padding: 14px;
    font-size: 13px;
    resize: none;
    margin-bottom: 15px;
    font-family: Arial, sans-serif;
}

.send-button {
    width: 100%;
    height: 47px;
    border: none;
    border-radius: 4px;
    background-color: #193820;
    color: white;
    font-size: 11px;
    letter-spacing: 1px;
    text-align: left;
    padding-left: 45px;
}

.send-button span {
    float:right; 
    margin-right:20px;
}

/* ---------- Google Map ---------- */

.map {
    width: 31%;
    height: 425px;
    float: right;
    border-radius: 8px;
    overflow: hidden;
}

.map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------- Contact Cards ---------- */

#contact-cards {
    width: 92%;
    margin: 0 auto 25px auto;
}

/* ---------- Individual Cards ---------- */

.contact-card {
    width: 23.5%;
    height: 145px;
    float: left;
    box-sizing: border-box;
    border: 1px solid #deded6;
    border-radius: 5px;
    padding: 18px;
    margin-right: 1.5%;
    background-color: #fafaf7;
}

.card-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #e8e9dc;
    float: left;
    margin-right: 12px;
    text-align: center;
    line-height: 34px;
    font-size: 16px;
    color: #29402d;
}

.contact-card h2 {
    font-family: Georgia, serif;
    font-size: 17px;
    font-weight: normal;
    margin: 3px 0 8px 0;
}

.contact-card p {
    font-size: 11px;
    line-height: 1.5;
    margin: 0 0 10px 46px;
}

.contact-card a {
    color: #193820;
    font-size: 10px;
    letter-spacing: 1px;
    margin-left: 46px;
}

/* ---------- Follow Us ---------- */

#follow-us {
    width: 23.5%;
    height: 145px;
    float: right;
    box-sizing: border-box;
    border-left: 1px solid #deded6;
    padding: 22px 0 0 40px;
}

#follow-us h3 {
    font-family: Georgia, serif;
    font-size: 17px;
    font-weight: normal;
    margin: 0 0 22px 0;
}

.social-link {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    text-align: center;
}

.social-link img {
    width: 30px;
    height: 30px;
    display: inline-block;
    object-fit: contain;
}

/* =========== Utility Classes =========== */

.no-right-margin {
    margin-right: 0;
}