@import url('https://fonts.googleapis.com/css2?family=Courgette&family=Meie+Script&family=Parisienne&family=Roboto&family=Sail&display=swap');

/* --------------- Website-wide Formatting Rules -------- */
/* Uppercase text*/
.uppercase {
    text-transform: uppercase;
}

/* 95% width format */
.w95 {
    width: 95%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

/* Background colours */
.orange-background {
    background-color: #e8c1bc;
}

main,
footer {
    background-color: #e8bcde;
}


/* Highlight current page in the navigation bar */
.active-page {
    text-decoration: underline;
    font-size: 12pt !important;
    font-weight: 600 !important;
}

/* Page title and headers */
.page-title {
    font-size: 48pt;
    font-family: 'Meie Script', 'Times New Roman', Times, serif;
    color: #e8bcde;
    padding-right: 30px;
}

.rsvp-faq-title {
    font-size: 32pt;
    font-family: 'Sail', 'Times New Roman', Times, serif;
    background: black;
    opacity: 0.7;
    padding-right: 20px;
    padding-left: 20px;
    border-radius: 25px;
}

.page-heading {
    height: 240px;
    padding-top: 160px;
    margin: 0;
    width: 100%;
    background-color: #000;
    opacity: 0.8;
    display: inline-block;
    text-align: center;
    font-size: 32px;
    line-height: 30px;
}

.page-title-container {
    padding: 0;
}

/* Buttons */
.adamiani-btn {
    color: #4A3C47;
    background-color: #e8bcde;
    border-color: #a87d9f;
}

.adamiani-btn:hover {
    font-weight: bold;
    background-color: #a87d9f;
    border-color: #e8bcde;
}

/* Code taken from https://materializecss.com/footer.html for sticky footer */
body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

/* --------------- HEADER AND NAVIGATION ---------------- */

/* Total Header Bar */
#header-section {
    font-family: 'Courgette', 'Times New Roman', Times, serif;
    position: fixed;
    padding: 0;
    margin: 0;
    z-index: 10;
}

#header-section a {
    color: #4A3C47;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 120px;
}

#logo-header,
.navbaritem {
    height: 120px;
    text-align: center;
    padding: 0;
}

/* Site Logo */
#logo-header {
    text-align: left;
    background-color: #e8bcde;
}

#logo-header h1 {
    padding-top: 10px;
}

#logo-header i {
    display: inline-block;
    font-size: 32pt;
}

#logo-header a {
    font-family: 'Sail', 'Times New Roman', Times, serif;
    padding-top: 10px;
    padding-left: 10px;
}

#logo-header span {
    font-size: 50pt;
}

/* Navigation Bar */
#nav li {
    font-size: 14pt;
    padding: 0;
}

.navbaritem i {
    display: block;
    padding-top: 33px;
    font-size: 22pt;
}

.navbaritem p {
    display: block;
    width: 100%;
    padding-top: 5px;
    text-align: center;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 2px;
}

.ui-menu-colour {
    background-color: #a87d9f;
}

/* Hover.css: change starting colour */
.hvr-shutter-in-vertical:before {
    background-color: #e8bcde;
}

/* Hover.css: animation colours */
.hvr-shutter-in-vertical:hover {
    background-color: transparent;
    color: #000 !important;
}

/* Hover.css: un-shuttering colour */
.hvr-shutter-in-vertical {
    background-color: transparent;
}

/* --------------- HOMEPAGE SECTION --------------------- */
/* Hero Image */
#hero-outer {
    height: 600px;
    overflow: hidden;
    position: relative;
    top: 120px;
}

#hero-image {
    height: 480px;
    width: 100%;
    background-image: url('../images/index_hero_image.webp');
    background-color: #e8bcde;
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: -110px;
    background-position-x: center;
    overflow: hidden;
    z-index: 0;
}

/* Hero Text */
.hero-info {
    text-align: center;
    background-color: rgba(74, 60, 71, 0.8);
    padding-bottom: 20px;
}

.hero-title {
    font-family: 'Meie Script', 'Times New Roman', Times, serif;
    font-size: 46pt;
    color: #e8bcde;
    text-align: center;
    display: block;
    line-height: 85px;
    margin-top: 300px;
    margin-bottom: 0px;
}

.hero-invite {
    font-family: 'roboto', Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #e8bcde;
    margin-bottom: 16px;
}


/* Homepage Information Section */
.homepage-details {
    height: 360px;
    color: #4A3C47;
}

.homepage-title {
    font-family: 'parisienne', Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 30pt;
    padding-top: 50px;
}

.homepage-text {
    font-family: 'roboto', Arial, Helvetica, sans-serif;
    word-spacing: 2px;
}

.homepage-images {
    text-align: center;
    padding: 0;
    border-color: #e8c1bc;
    border-style: solid;
    border-width: 10px;
}

.homepage-ceremony-image {
    height: 340px;
    background-image: url('../images/index_cathedral.webp');
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    background-position: bottom;
    width: 100%;
}

.homepage-reception-image {
    height: 340px;
    background-image: url('../images/index_reception.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    overflow: hidden;
    width: 100%;
}

/* Homepage Image Section */

.homepage-bottom-image {
    height: 360px;
    text-align: center;
    padding: 0;
    border-color: #e8c1bc;
    border-style: solid;
    border-width: 10px;
}

#homepage-bottom-image-1 {
    background-image: url('../images/index_couple_1.webp');
    background-size: cover;
    background-position: center;
}

#homepage-bottom-image-2 {
    background-image: url('../images/index_couple_2.webp');
    background-size: cover;
    background-position: center;
    border-left-width: 0;
    border-right-width: 0;
}

#homepage-bottom-image-3 {
    background-image: url('../images/index_couple_3.webp');
    background-size: cover;
    background-position: right;
}

/* --------------- ABOUT US SECTION --------------------- */
/* All font aweseome hearts on page */
.fa-heart {
    color: #ff0000;
    padding-top: 2px;
}

/* Heading Font-Awesome */
.page-heading .fa-heart {
    padding-top: 10px;
    font-size: 20pt;
}

/* Video settings */
#about-us-video {
    width: 80%;
    padding-top: 20px;
}

/* About Us Content */
#about-us-content {
    padding-top: 20px;
    text-align: center;
    color: #4A3C47;
}

.about-us-image {
    height: 240px;
    width: 240px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    vertical-align: middle;
    margin-top: 100px;
}

.about-us-lead-image {
    margin-top: 30px;
}

.about-us-last-image {
    margin-bottom: 50px;
}

.baby-image {
    height: 120px;
    width: 120px;
}

.about-us-text {
    position: relative;
    height: auto;
    width: 65%;
    display: inline-block;
    text-align: left;
    padding-left: 20px;
    vertical-align: middle;
    padding-top: 100px;
}

.about-us-lead-paragraph {
    padding-top: 30px;
}

.about-us-last-paragraph {
    padding-bottom: 50px;
}

.about-us-text .fa-heart {
    padding-right: 10px;
}

.about-us-lead-text {
    font-family: 'parisienne', Arial, Helvetica, sans-serif;
    font-size: 40px;
    font-weight: bold;
    line-height: 1.5;
}

.about-us-story-text {
    font-family: 'roboto', Arial, Helvetica, sans-serif;
}

/* --------------- TRAVEL SECTION ----------------------- */
/* Travel heading Font-Awesome */
.page-heading .fa-plane {
    padding-top: 10px;
    font-size: 20pt;
    color: #fafafa;
}

/* Travel Content */
.travel-section {
    min-height: 322px;
    padding: 9.6px;
    color: #4A3C47;
    margin: auto;
}

.travel-title {
    font-family: 'parisienne', Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 48pt;
    color: #4A3C47;
    padding-bottom: 20px;
    padding-top: 20px;
}

.travel-image {
    height: 322px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 15pt solid transparent;
}

#airplane {
    background-image: url('../images/travel_airplane.webp');
}

#svetitskhoveli {
    background-image: url('../images/travel_cathedral.webp');
}

#travel-reception-image {
    background-image: url('../images/travel_reception.webp');
}

.travel-text {
    font-family: 'roboto', Arial, Helvetica, sans-serif;
    text-align: left;
    margin: auto;
}

.travel-map iframe {
    width: 100%;
    height: 100%;
    border: 15pt solid transparent;
}

/* --------------- HOTELS PAGE -------------------------- */

/* Heading Font-Awesome */
.page-heading .fa-hotel {
    padding-top: 10px;
    font-size: 20pt;
    color: #fafafa;
}

/* Hotels content */
.hotel-section a {
    text-decoration: none;
    width: auto;
}

.hotel-section {
    padding-top: 30px;
}

.hotel-option {
    font-family: 'parisienne', Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 48pt;
    color: #4A3C47;
    padding-top: 20px;
}

.hotel-link {
    font-family: 'Courgette', 'Times New Roman', Times, serif;
    font-weight: bold;
    font-size: 24pt;
    color: #4A3C47;
    border-radius: 25px;
    padding-right: 20px;
    padding-left: 20px;
}

.hotel-link:hover {
    color: #e8bcde;
    background: rgba(0, 0, 0, 0.5)
}

.hotel-image {
    width: 80%;
    height: auto;
    padding-top: 20px;
}

.hotel-text {
    text-align: center;
    font-family: 'roboto', Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
    line-height: 1.5;
    width: 75%;
    margin: auto;
    padding-top: 30px;
    padding-bottom: 30px;
}

/* --------------- RSVP AND FAQ PAGE -------------------- */
/*RSVP and FAQ titles */
.rsvp-faq-tablet {
    font-size: 32pt;
    font-family: 'Sail', 'Times New Roman', Times, serif;
    width: 80%;
    margin: auto;
    background-size: cover;
    background-position: bottom;
    background-position-y: -25px;
    border-color: #e8c1bc;
}

.page-heading-rsvp-faq {
    height: 240px;
    padding-top: 160px;
    margin: 0;
    width: 100%;
    display: inline-block;
    text-align: center;
    font-size: 32px;
    line-height: 30px;
}

/* RSVP and FAQ Images */
.side-image {
    margin-top: 110px;
    background-size: cover;
    background-position: center;
    border-color: #e8c1bc;
    border-style: solid;
    border-width: 10px;
    border-bottom: none;
    height: auto;
}

.side-image-left {
    border-right: none;
}

.side-image-right {
    border-left: none;
}


/* --------------- RSVP PAGE ---------------------------- */
/* Heading Font-Awesome */
.page-heading .fa-calendar-check,
.page-heading-rsvp-faq .fa-calendar-check {
    padding-top: 10px;
    font-size: 20pt;
    color: #fafafa;
}

/* Images */
#rsvp-title-image {
    background-image: url('../images/rsvp_top.webp');
}

.rsvp-side-image {
    background-image: url('../images/rsvp_side.webp');
}

/* Reminder content */
#rsvp-reminder {
    margin: 0;
    color: #4A3C47;
    font-family: 'roboto', Arial, Helvetica, sans-serif;
    padding-top: 20px;
    font-weight: bold;
}

/* Form content */
form {
    padding-bottom: 10px;
    color: #4A3C47;
    font-family: 'roboto', Arial, Helvetica, sans-serif;
}

.form-line {
    padding-top: 20px;
    margin: auto;
}

.meal-choices {
    padding-top: 5px;
}

.meal-option {
    text-align: center;
    font-family: 'sail', 'Times New Roman', Times, serif;
    padding-top: 10px;
}

#meal-question {
    text-align: center;
    font-family: 'sail', 'Times New Roman', Times, serif;
    font-size: 32pt;
    padding-top: 30px;
}

.food-option {
    text-align: left;
    padding-left: 30px;
    margin: auto;
}

.form-line textarea {
    text-align: left;
    resize: none;
}

#submit-button {
    text-align: center;
    padding-top: 10px;
}

/* --------------- FAQ PAGE ----------------------------- */
/* Heading Font-Awesome */
.page-heading .fa-circle-question,
.page-heading-rsvp-faq .fa-circle-question {
    padding-top: 10px;
    font-size: 20pt;
    color: #fafafa;
}

/* FAQ Images */
#faq-title-image {
    background-image: url('../images/faq_top.webp');
    background-position-y: 20px;
}

.faq-side-image {
    background-image: url('../images/faq_side.webp');
}

/* Accordion */
/* Accordion title - not pressed */
.accordion-button {
    font-family: 'parisienne', Arial, Helvetica, sans-serif;
    font-size: 32px;
    font-weight: bold;
    color: #4A3C47;
    background-color: #e8bcde;
}

/* Accordion title - pressed */
.accordion-button:not(.collapsed) {
    color: #fafafa;
    background-color: #a87d9f;
}

/* Remove blue border when clicked */
.accordion-button:focus {
    box-shadow: none;
}

/* Accordion content */
.accordion-body {
    font-family: 'roboto', Arial, Helvetica, sans-serif;
    color: #4A3C47;
    text-align: left;
}

/* --------------- Error 404 and Response pages----------- */
/* Page layout */
.page-spacer {
    padding-bottom: 180px;
}

.section-404-response {
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
    font-family: 'roboto', Arial, Helvetica, sans-serif;
    color: #4A3C47;
    vertical-align: center;
}

.section-404-response h2 {
    font-size: 32pt;
}

.section-404-response a {
    margin: auto;
}

.section-404-response i {
    padding-left: 20px;
    padding-right: 20px;
    font-size: 20pt;
}

/* --------------- FOOTER AND SOCIAL LINKS -------------- */
/* Footer positioning */
#footer {
    width: 100%;
    height: 120px;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

/* Link formatting */
#footer a {
    text-decoration: none;
}

/* Contact Details */
.contact-details {
    text-align: left;
    font-size: 14px;
    letter-spacing: 1px;
    font-family: 'roboto', Arial, Helvetica, sans-serif;
    color: #4A3C47;
    padding-left: 10px;
}

#phone-number {
    display: block;
    padding-top: 30px;
}

#email-address {
    display: block;
}

#email-address i {
    padding-right: 2px;
}

#email-link {
    color: inherit;
}

#postal-address {
    display: block;
}

/* Footer Logo */
#logo-footer-container {
    padding-top: 20px;
}

#logo-footer-container a {
    display: block;
    height: 80px;
    width: 100%;
}

#logo-footer {
    text-align: center;
    padding-top: 8px;
    font-size: 50px;
    font-family: 'sail', 'Times New Roman', Times, serif;
    color: #4A3C47;
}

/* Social Media Links */
footer ul {
    width: 100%;
}

.social-media-links {
    text-align: center;
    padding: 0;
}

.social-media-links .fa-brands {
    display: block;
    padding-top: 30px;
    font-size: 30px;
    color: #4A3C47;
}

.social-media-links .gender,
.social-media-links a p {
    font-size: 15px;
    color: #4A3C47;
    font-family: 'roboto', Arial, Helvetica, sans-serif;
}

.social-media-links a {
    display: block;
    width: 100%;
    height: 120px;
}

#instagram-hash,
#twitter-hash {
    font-family: 'roboto', Arial, Helvetica, sans-serif;
}

/* Footer effects */
#email-link:hover {
    text-decoration: none;
    font-weight: bolder;
}

#logo-footer-container a:hover {
    text-decoration: none;
}

.facebook-link a,
.twitter-link a,
.instagram-link a {
    transition: all 0.5s ease-in-out;
}

.facebook-link a:hover {
    background-color: #fff;
}

.facebook-link a:hover .fa-facebook {
    color: #1877F2;
}

.facebook-link a:hover .gender {
    color: #1877F2;
}

.twitter-link a:hover {
    background-color: #000;
}

.twitter-link a:hover .fa-x-twitter {
    color: #fff;
}

.twitter-link a:hover #twitter-hash {
    color: #fff;
}

.instagram-link a:hover {
    background-color: #fff;
}

.instagram-link a:hover .fa-instagram {
    color: #000;
}

.instagram-link a:hover #instagram-hash {
    color: #000;
}

.social-media-links a:hover {
    text-decoration: none;
}

/* -------- Tablet Media Queries ------------------------ */
@media screen and (max-width: 992px) {

    /* Reduce navigation bar height by half, centers the content and reduces text size */
    .navbaritem,
    .navbaritem a {
        height: 60px;
    }

    #header-section a {
        height: 60px;
    }

    .navbaritem i {
        padding-top: 10px;
        font-size: 16pt;
    }

    .navbaritem p {
        padding-top: 2px;
        font-size: 12pt;
    }

    /* Remove postal address from footer */
    #postal-address {
        display: none;
    }

    #phone-number {
        padding-top: 30px;
    }

    #email-address {
        padding-top: 8px;
    }

    /* Reduce size of footer logo */
    #logo-footer {
        font-size: 38px;
        padding-top: 13px;
    }

    /* Reduce social media hashtag size */
    .social-media-links a p,
    .gender {
        font-size: 10px !important;
        padding-top: 6px;
    }

    /* Homepage: reduce hero text size */
    .hero-title {
        font-size: 32pt;
    }

    /* Homepage: make hero image fill the div */
    #hero-image {
        background-position: bottom;
    }

    /* Homepage: add margin to index_couple_2 to centre images */
    #homepage-bottom-image-2 {
        border-right-width: 10px;
    }

    /* FAQ: Move image to title background */
    .question-page-heading {
        background-image: url('../images/index_hero_image.webp');
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
    }

    /* FAQ: reduce question font size */
    .accordion-button {
        font-size: 20pt;
    }
}

/* --------- Phone Media Queries ------------------------ */
@media screen and (max-width: 767px) {

    /* Reduce logo bar height by half, centres and reduces content size */
    #logo-header,
    #logo-header a {
        height: 60px;
        text-align: center;
        padding-top: 2px;
    }

    #logo-header a i {
        font-size: 20pt;
    }

    #logo-header a span {
        font-size: 32pt;
    }

    #logo-header i {
        padding-top: 0;
    }

    #logo-header h1 {
        padding-top: 4px;
    }

    /* Homepage: move hero image below nav bar */
    #hero-outer {
        height: 480px;
    }

    /* Homepage: style new div for hero text */
    #phone-hero-text {
        padding: 0;
        margin: auto;
        width: 95%;
    }

    .hero-info {
        background-color: #e8c1bc;
    }

    .hero-title {
        margin-top: 120px;
        font-size: 28pt;
        line-height: 40px;
        color: #4A3C47;
        padding-top: 10px;
    }

    .hero-invite {
        color: #4A3C47;
    }

    /* Homepage: adjust text box heights to fit all text */
    .homepage-title {
        padding-top: 20px;
    }

    .homepage-details {
        height: inherit;
    }

    /* Page title moved below navbar */
    .page-heading,
    .page-heading-rsvp-faq {
        height: 300px;
        padding-top: 220px;
    }

    /* About-us: text to take up more of the screen */
    .about-us-text {
        width: 80%;
    }

    /* About-us: page layout changes */
    .about-us-text {
        padding-top: 20px;
    }

    .about-us-last-paragraph {
        padding-bottom: 0;
    }

    .about-us-image {
        margin-top: 20px;
    }

    /* Travel: map height set */
    .travel-map {
        height: 320px;
    }

    /* Travel: text positioning */
    .travel-text {
        padding-top: 20px;
    }

    /* Hotels: reduce option text size */
    .hotel-option {
        font-size: 30pt;
    }

    /* RSVP: image resize */
    .rsvp-faq-tablet {
        background-position-y: 90px;
    }

    /* FAQ: title image resize */
    #faq-title-image {
        background-position-y: 120px;
    }

    /*FAQ: reduce question font size */
    .accordion-button {
        font-size: 16pt;
    }

    /*404 and Response: move content down and resize */
    .page-spacer {
        padding-bottom: 200px;
    }

    .section-404-response h2 {
        font-size: 16pt;
    }

    .return-button {
        width: 80%;
        margin: auto;
    }
}

/* --------- Small Phone Media Queries ------------------ */
@media screen and (max-width: 420px) {

    /* Reduce footer text size and centres content vertically */
    #footer {
        height: 80px;
    }

    .contact-details {
        font-size: 12px;
    }

    #phone-number {
        padding-top: 15px;
    }

    #email-address {
        padding-top: 20px;
        font-size: 7pt;
    }

    .social-media-links a p {
        font-size: 12px;
        padding-top: 6px;
    }

    .social-media-links .fa-brands {
        padding-top: 20px;
    }

    .gender {
        display: none;
    }

    #instagram-hash,
    #twitter-hash {
        display: none;
    }

    /* About us: Reduce title text size */
    .about-us-title {
        font-size: 28pt;
    }

    /* Hotels: Reduce option text size */
    .hotel-option {
        font-size: 24pt;
    }
}