@import url('https://fonts.googleapis.com/css2?family=Crimson+Text&family=Julius+Sans+One&display=swap');

:root {
    --main-bg-color: #F4E9E5;
  }

html {
    height: 100%;
}

body {
    font-family: "Crimson Text", sans-serif;
    position: relative;
    margin: 0;
    min-height: 100%;
    padding-bottom: 8rem;
}

.link-no-decor, .product-link {
    text-decoration: none;
    color: #252525;
}

.homepage-btn {
    border: none;
    border-radius: 18px;
    background-color: var(--main-bg-color);
    font-family: "Crimson Text", sans-serif;
    padding: 5px 15px;
    margin-bottom: 8px;
    max-width: 180px;
    margin: auto;
}

.page-button {
    min-width: 180px;
}

.section-title {
    text-align: center;
    padding: 30px 10px;
}

.hover-link:hover {
    text-decoration: underline;
    color: blue;
}

img {
    width: 100%;
    height: auto;
}

/* Form Styles */
.form-control {
    width: 75%;
    margin: auto;
}

.form-check {
   margin: auto;
}

.form-list {
    list-style: none;
    padding: 2px;
}

.account-container {
    max-width: 400px;
}

.account-card {
    border-radius: 30px;
    background: #FAF6F4;
    box-shadow:  5px 5px 7px #b4b0af,
                -5px -5px 7px #ffffff;
    padding: 15px 5px 20px 5px;
}

.account-title {
    padding: 10px 0;
}


/* Navbar styles */
.brand {
    font-family: "Julius Sans One", sans-serif;
    font-size: 1.8vh;
    font-weight: 700;
    color: #4A4A4F;
}

.navbar {
    --bs-navbar-toggler-padding-x: 0.50rem;
    --bs-navbar-toggler-font-size: 1rem;
    padding: 5px 20px;
    background-color: #fff;
}

#navbarText {
    border-radius: 18px;
    padding: 5px 8px 2px 8px;
}

.navbar-toggler-icon {
    height: 1.2rem;
    width: 1.2rem;
}

.logged-in {
    font-size: 0.9rem;
}

/* Messages */
.message-container {
    max-width: 1000px;
    margin: auto;
}

.close {
    float: right;
}

.alert {
    font-family: "Crimson Text", sans-serif;
    font-size: 20px;
}

/* Hero style */
.hero-container {
    padding: 0;
}

.carousel-inner img {
    margin: auto;
}
/* code adapted from stackoverflow answer here: https://bit.ly/46t7RfQ */
.carousel-overlay {
    position: absolute;
    bottom: 10%;
    left: 5%;
    z-index: 11;
    color: #252525;
}

#hero-text {
    display: none;
    font-size: 18px;
}

.hero-btn {
    display: none;
    max-width: 200px;
    font-size: 18px;
}

.big-btn button {
    margin-bottom: 5px;
    font-size: 15px;
    border-radius: 0;
    width: 100%;
}

.mobile-btn {
    background-color: var(--main-bg-color);
}

/* Homepage category list styles */
.category-section {
    padding-top: 20px;
    padding-bottom: 50px;
}

.category-link {
    text-decoration: none;
    color: #252525;
}

.card-title {
    text-align: center;
    font-size: 1.2rem;
    padding: 8px 0;
}

.card-body {
    padding: 5px;
    border-radius: 15px;
    margin: 5px;
}

.card-body img {
    border-radius: 15px;
}

/* Homepage 'come and see us' section styles */
.appt-section {
    /* Code created using Neumorphism tool: https://neumorphism.io/#e0e0e0 */
    background: var(--main-bg-color);
    box-shadow:  8px 8px 44px #b5aca9,
                -8px -8px 44px #ffffff;
    min-height: 315px;
}

.appt-btn {
    font-size: 20px;
    background-color: white;
    max-width: 240px;
}

/* Animate elements in when user scrolls */
.scroll-animation {
    opacity: 0;
    transition: all 1s;
}

.scroll-animation-go {
    opacity: 1;
    transform: translateX()
}

/* Homepage 'Join our community of brides' styles */
.link-hover:hover {
    color: blue;
}

/* Homepage 'our brides' section styles */
.outer-section {
    width: 100%;
}
.brides-section {
    max-width: 900px;
    padding-top: 20px;
}

.brides-text-first, .brides-text-second {
    display: flex;
    flex-direction: column;
    align-self: center;
    padding: 30px 30px 0 30px;
}

.brides-img img {
    width: 280px;
    height: 280px;
}

/* All products page styles */
.products-container {
    margin: auto;
}

.product-link * {
    margin-bottom: 0;
    margin: auto;
}

.product-link h3 {
    margin-top: 4px;
}

/* Product details page styles */
.image-container {
    max-width: 500px;
}

.product-summary {
    max-width: 500px;
}

.info-border {
    border: 3px #F4E9E5 double;
    max-width: 500px;
    border-radius: 18px;
}

/* Profile page styles */
.profile-pic {
    height: 200px;
    width: auto;
}

.favs-container {
    max-width: 995px;
}

.img-thumbnail {
    width: 200px;
    height: auto;
}

/* About us styles */
.about-section, .map-section, .location-section, .community-section, .appointment-section {
    max-width: 1000px;
    margin: auto;
    margin-bottom: 80px;
}

.about-text * {
    text-align: start;
}

.about-text-2 {
    order: 2;
}

.about-img {
    border-radius: 15px;
}

/* Recommendations Community Page */
.recommendation-cards, .appointment-cards {
    border: 1px solid #252525;
    border-radius: 15px;
    max-width: 415px;
    background: #fff;
    /* Code created using Neumorphism tool: https://neumorphism.io/ */
    box-shadow:  18px 18px 17px #a39c99,
                -18px -18px 17px #ffffff;
    position: relative;
}

/* Page divider */
/* Code adapted from Isabel C CodePen 'Pure CSS Horizontal Divider With Star Icon': 
https://codepen.io/isabelc/pen/MmrJgx */
.divider {
    margin: 40px auto;
    width: 700px; 
    max-width: 100%;
    position: relative;
  }
  
  .divider-inner { 
    overflow: hidden; 
    height: 20px; 
  }
  
  .divider-inner:after { 
    content: ''; 
    display: block; 
    margin: -25px auto 0;
    width: 100%; 
    height: 25px;  
    border-radius: 10px;
    box-shadow: 0 0 10px #F0C6AD;
  }
  .divider span {
    width: 50px; 
    height: 50px; 
    position: absolute; 
    bottom: 100%; 
    margin-bottom: -25px;
    left: 50%; 
    margin-left: -25px;
    border-radius: 100%;
    box-shadow: 0 2px 4px #F0C6AD;
    background: #fff;
  }
  .divider i {
    position: absolute;
    top: 4px; 
    bottom: 4px;
    left: 4px; 
    right: 4px;
    border-radius: 100%;
    border: 1px dashed #F0C6AD;
    text-align: center;
    line-height: 40px;
    color: #F0C6AD;
    font-size: 30px;
  }

/* Appointments Page styles */
.booking-title {
    text-decoration: underline;
}

.appt-button {
    min-width: 100px;
}

/* Contact Page styles */
.contact-section {
    max-width: 1000px;
    margin: auto;
    margin-bottom: 30px;
    border-radius: 18px;
}

.location-section {
    margin-bottom: 30px;
}

.form-text {
    margin: 2px 8px 8px 8px;
}

iframe {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 280px;
}

/* Footer styles */
footer {
    background-color: #fff;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
}

.social-media-links i {
    font-size: 25px;
    padding: 0 5px;
}

/* Media queries */
@media (min-width: 576px) {
    .brand {
        font-size: 2vh;
    }

    .big-btn {
        display: none;
    }

    .hero-btn {
        display: block;
    }

    .brides-row-1 {
        padding: 15px;
    }

    .brides-text-first * {
        text-align: end;
    }

    .brides-text-second {
        order: 2;
    }
    
    .brides-text-second * {
        text-align: start;
    }

    iframe {
        height: 460px;
    }

    .account-container {
        max-width: 650px;
    }
    .account-card {
        padding: 15px 5px 60px 5px;
    }
}

@media (min-width: 768px) {
    .contact-information {
        padding-top: 30px;
    }

    #form-divider {
        display: none;
    }
}

@media (min-width: 992px) {
    .brand {
        font-size: 2.3vh;
    }

    .homepage-btn {
        font-size: 18px;
    }

    .hero-btn {
        font-size: 20px;
        max-width: 240px;
    }
    
    .body-content {
        padding-left: 40px;
    }

    .logged-in {
        text-align: right;
    }
}