@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Nunito&family=Tangerine&display=swap&display=swap');

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    font-family: 'Lato', sans-serif;
    background-color: #fff;
    color: #000;
}

h1{
    font-size:  64px;
    font-family:'Tangerine';
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Shared button styles */
.button_common {
    font-weight: normal;
    border: none;
    color: white;
    padding: 11px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px; /* Default to the smaller size for consistency */
    border: 2px solid #fff; /* white border for contrast */
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 16px; /* rounded corners */
    text-transform: uppercase; /* uppercase text for emphasis */
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* subtle shadow for depth */
}

/* Additional styles for primary button */
.red_button {
    background: linear-gradient(to bottom, #8a0303, #6a0202);
    font-size: 24px; /* Larger font size for primary button */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* more pronounced shadow for primary button */
}

.red_button:hover {
    background: linear-gradient(to bottom, #a90404, #8a0303);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* larger shadow for hover effect */
    transform: translateY(-2px);
}

/* Additional styles for secondary button */
.secondary_button {
    font-size: 24px; /* Retain the larger font size */
    color: #5a5a5a; /* Darker font color for contrast */
    background: linear-gradient(to bottom, #fff2ce, #f2e3b9); /* Lighter gradient based on #fff2ce */
}

.secondary_button:hover {
    color: #404040; /* Even darker font color on hover for contrast */
    background: linear-gradient(to bottom, #fff7d5, #f5e8c4); /* Slightly lighter tan gradient for hover effect */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* Retain the smaller shadow for hover effect */
    transform: translateY(-1px); /* Retain the vertical movement on hover */
}


.logo {
    font-size: 64px;
    font-family: 'Tangerine';
}

.background-image {
    width: 70%;
    height: 70%; /* This will make the background image static */
}

p {
    font-size: 18px;
    line-height: 1.65;
}

.snowflake {
    position: absolute;
    color: #ffffff;
    opacity: 0.8;
    font-size: 1em; /* Starting size */
    pointer-events: none; /* Ignore mouse events */
}

@keyframes fall {
    0% {
        transform: translateY(-100vh);
    }

    100% {
        transform: translateY(100vh);
    }
}

.faq-outer-container {
    background-color: #8a0303;
}

.faq-container {
    width: 80%;
    margin: 0 auto;
    padding: 20px 20px 40px 20px;
}

.faq {
    background: #fff4d6;
    margin-bottom: 10px;
    border: 1px solid #fff4d6;
    border-radius: 10px;
}

.faq-question {
    background: #fff4d6;
    color: #6a0202;
    padding: 10px;
    cursor: pointer;
    border-radius: 10px;
}

.faq-question h1 {
    margin: 0;
    color: #fff;
}

.faq-question h2 {
    font-size:22px;
    margin-bottom:0;
}

.faq-answer {
    padding: 8px 10px 8px 10px;
    display: none; /* Hide answers by default */
    background: #fff4d6;
    border-radius: 10px;
}


.faq-answer p {
    font-size: 18px;
}

/* Style adjustments for opened FAQ answers */
.faq.active .faq-answer {
    display: block;
}

.faq-toggle {
    float: right; /* Position it to the right */
    cursor: pointer; /* Change cursor on hover */
}

/* Style for when the FAQ is open */
.faq.open .faq-toggle {
    content: '-'; /* Change icon to minus */
}

/* Ensures maximum compatibility with existing Bootstrap styles */
/* Form background and spacing */
.composeForm {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 0 auto; /* Centers the form on the page */
    max-width: 650px; /* Adjusts max-width for desktop screens */
    margin-bottom:20px;
}

/* Field styles */
.composeForm .form-control {
    background-color: #ffffff; /* Making the fields pure white for better contrast */
    border: 2px solid #ccc; /* A stronger border for definition */
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); /* Subtle inner shadow for depth */
    padding: .375rem .75rem; /* Bootstrap's default padding */
    border-radius: .25rem; /* Bootstrap's default border-radius */
}

/* Label styles */
.composeForm label {
    font-weight: bold;
    color: #333;
    margin-bottom: .5rem; /* Less space between the label and the input */
}

/* Responsive design adjustments */
@media (max-width: 768px) {
    .composeForm {
        max-width: none; /* Allows the form to fill the screen on mobile */
        padding: 15px;
    }

    .composeForm .form-group {
        margin-bottom: 15px;
    }
}

.sample-letters-container {
    max-width: 90%;
    margin: auto;
    padding: 30px 20px 50px 20px;
}

.sample-letters-heading {
    font-family: 'Nunito', sans-serif;
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.sample-letters-intro {
    font-size: 1rem;
    text-align: center;
    margin-bottom: 2rem;
}

.sample-letter:hover {
    cursor: pointer; /* Change the cursor to a hand icon on hover */
    transform: translateY(-5px); /* Move the section up slightly on hover */
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); /* Add a subtle box shadow on hover */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Add a smooth transition */
}

/* Reset the hover effect when not hovering */
.sample-letter:not(:hover) {
    transform: translateY(0); /* Reset the section position */
    box-shadow: none; /* Remove box shadow */
}

.sample-letter a, .sample-letter a:link, .sample-letter a:visited {
    text-decoration: none; /* Remove the underline */
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px; /* Adjust the spacing as needed */
}

.col-md-4 {
    width: 100%;
    padding: 15px;
}

.sample-letter {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col-md-4 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: 15px;
    margin-left: 15px;
}

@media (min-width: 768px) { /* Adjust this breakpoint as needed for your design */
    .col-md-4 {
        width: calc(33.333333% - 30px); /* Set to 1/3 of the container width */
    }
}

.letter-thumbnail {
    width: 100%; /* Adjust the thumbnail width as needed */
    max-width: 200px; /* Set a max-width for the image */
    margin-bottom: 15px;
}

.letter-content {
    flex-grow: 1;
}

.letter-title {
    font-family: 'Nunito', sans-serif;
    color: #333;
    margin-bottom: 0.5rem;
}

.child-name {
    color: #8a0303;
}

.letter-detail {
    font-size: 1rem;
    line-height: 1.5;
    color: #555;
}

.letter-thumbnail {
    display: block; /* Images are inline by default; change this to block to apply margin properties */
    margin-left: auto; /* These two margins set to auto center the block horizontally */
    margin-right: auto;
    width: 100%; /* Adjust this as necessary to fit your design */
    max-width: 180px; /* Example max-width to prevent the image from being too large */
    height: auto; /* Keep the aspect ratio of the image */
}

.footer {
    background-color: #343a40; /* A dark shade of grey */
    color: #dcdcdc; /* Light grey for text for readability */
    padding: 1em 0; /* Padding to give some space */
    font-size: 0.9em; /* A slightly smaller font size is common in footers */
    line-height:32px !important;
}

.footer a, .footer a:link, .footer a:visited {
    color: #f8f9fa; /* A brighter shade for links to stand out against the footer background */
    text-decoration: none; /* Optional: Removes underline from links */
    padding: 0 0.5em; /* Spaces out the links */
}

.footer a:hover {
    color: #ffffff; /* Color for link hover effect */
    text-decoration: underline; /* Optional: Adds underline on hover for a clear indication of a link */
}

.container.text-center {
    text-align: center; /* Center align the footer content */
}

.header {
    background-color: #8a0303;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header .container {
    display: flex;
    align-items: center;
    flex-grow: 1;
    justify-content: space-between;
}

.header-logo {
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center; /* Ensure the logo doesn't shrink on desktop */
}

.header-logo img {
    max-height: 105px; /* Maintain the original height */
    padding: 10px 5px 0px 5px;
}

.title-link {
    text-align: center;
    flex-grow: 1;
    font-size: 64px; /* Your specified size */
    font-family: 'Tangerine', cursive;
    color: #fff;
    margin: 0; /* Remove any default margins */
    line-height: 105px; /* Adjust the line height to match the image height */
    white-space: nowrap;
}

.header-logo, .header-actions {
    display: flex;
    align-items: center;
    flex-flow: row nowrap;
}

.header-actions a, .header-actions a:link, .header-actions a:visited {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    margin: 0 15px; /* Adjust spacing between links */
    font-size: 18px; /* Adjust size as necessary */
    line-height: 18px; /* Vertically center the links */
}

.header-actions {
    display: flex;
    flex-grow: 0;
}

.menu-toggle {
    display: none;
    cursor: pointer;
    margin-top: 6px;
}

.menu-toggle span {
    display: block;
    width: 25px; /* Adjust as needed */
    height: 3px; /* Adjust as needed */
    background-color: #FFF; /* Adjust as needed */
    -moz-border-radius: inherit;
    -webkit-border-radius: inherit;
    border-radius: 3px;
    margin: 5px 0; /* Adjust as needed */
    transition: all 0.3s ease;
}

.header-img-mobile {
    display: none;
}

.header-img {
    display: block;
}

@media (max-width: 768px) {
    .header .container {
        display: flex;
        align-items: center;
        flex-grow: 1;
        justify-content: space-between;
    }

    .header-img-mobile {
        display: block;
    }

    .header-img {
        display: none;
    }

    .header-logo img {
        max-height: 105px; /* Maintain the original height */
        padding: 5px;
    }

    .header-logo {
        order: -1; /* Moves the logo to the left */
    }

        .header-logo img {
            max-height: 60px; /* Smaller logo for mobile */
            margin-top: 3px;
        }

    .title-link {
        flex-grow: 1;
        order: 0;
        font-size: 46px; /* Significantly smaller title for mobile */
        line-height: normal; /* Adjust the line height to match the smaller title */
        padding-top: 4px; /* Add some space above the title */
    }

    .header {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .header-actions a, .header-actions a:link, .header-actions a:visited {
        color: #fff;
        font-weight: normal;
    }

    .header-actions {
        display: none;
        position: absolute;
        top: -100%; /* Initially position the menu off-screen */
        left: 0;
        right: 0;
        text-align: center;
        color: #FFF;
        background-color: #9f3030; /* Or your preferred background */
        z-index: 1000; /* Ensure it's above other content */
        transition: top 0.5s ease-in-out; /* Smooth transition for the sliding effect */
        padding: 8px;
    }

        .header-actions.show {
            display: block;
            top: 100%; /* Slide down to be fully visible */
            /* Adjust position as needed based on your header's height */
        }

    .menu-toggle {
        order: 1;
        margin: 5px;
        display: block;
        color: #fff;
        /* Style the button as needed */
    }

    .faq-container {
        width: 100%;
    }

    .sample-letter {
        margin-left: 0px;
        margin-right: 0px;
    }

    .contact-container {
        margin-left: 20px;
        margin-right: 20px;
        width: calc(100% - 40px);
    }
}