/* Custom CSS */
body {
    font-family: 'garamond', sans-serif;
    background-color: rgb(163, 159, 159);
}

header {
    background-size: cover;
    background-position: center;
    height: 100vh;
}

/* Custom styles for navbar */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: #343a40; /* Same color as .bg-dark */
    }
    .navbar-nav {
        flex-direction: column; /* Stack the nav items vertically */
        width: 100%;
        text-align: center; /* Center the nav items */
    }
    .navbar-nav .nav-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Add a border for better separation */
    }
    .navbar-nav .nav-item:last-child {
        border-bottom: none; /* Remove border for the last item */
    }
}

@media (min-width: 992px) {
    .navbar-nav {
        flex-direction: row; /* Arrange nav items in a row */
    }
}

/* Optional: improve the appearance of the toggler button */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.1); /* Lighter border */
}

/* Optional: improve the appearance of the navbar brand */
.navbar-brand {
    font-weight: bold;
    font-size: 1.25rem;
}

.carousel-item {
    height: 100vh;
    background-size: cover;
    background-position: center;
}

.carousel-caption {
    color: white;
    background: rgba(0, 0, 0, 0);
    padding: 20px;
    border-radius: 10px;
}

h1, h2 {
    font-family: 'Garamond', sans-serif;
}

.card:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}

.card img {
    transition: transform 0.3s ease-in-out;
}

.card img.zoom:hover {
    transform: scale(1.1);
}

.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
}

nav{
    height: 10vh;
}

.card img.zoomable {
    cursor:zoom-in;
}

.card img.zoomable:active {
    transform: scale(1.5);
    transition: transform 0.3s ease-in-out;
}

/* .benefit{ 
    padding-top: 2%;
    padding-right: 5%;
    width: 60vh;
    height: 40vh;
    transition: transform 0.3s ease-in-out;
}

.benefit:hover{
    transform: scale(1.1);
    transition: 1s;
}

Benefits Section 
#benefits .container .row {
    margin-bottom: 2rem;
}

#benefits .container .row img {
    max-width: 100%;
    height: auto;
}
 */

 .inspiration_links{
    color: rgb(197, 38, 112);
}

.inspiration_links:hover{
    color: rgb(197, 38, 112);
    font-size: 2.2vh;
    transition: 1s;
    text-decoration: none;
}

 /* General Container Styling */
.container {
    padding: 0 15px; /* Adjust padding to fit your layout */
}

/* Benefits Section */
#benefits h2 {
    margin-bottom: 1rem; /* Space below the heading */
}

#benefits p {
    margin-bottom: 2rem; /* Space below the paragraph */
}

/* Flex for rows */
.row {
    margin-bottom: 2rem; /* Space below each row */
}

/* Benefit Image Styling */
.benefit { 
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Optional: adds rounded corners */
    transition: transform 0.3s ease-in-out;
}

.benefit:hover {
    transform: scale(1.05); /* Slightly increase size on hover */
}

/* Responsive Image Adjustment */
@media (min-width: 768px) {
    .benefit {
        max-height: 35vh; /* Limit height to 35% of viewport height on medium screens */
        object-fit: cover; /* Ensure the image covers the space */
    }
}

@media (max-width: 767px) {
    .benefit {
        max-height: 25vh; /* Reduce height on small screens */
    }
}


/* Ensure the container is centered and responsive */
.container {
    max-width: 100%;
    padding: 0 15px;
    margin: 0 auto;
}






/* Styling for Testimonials Section */
#Testimonials {
    padding: 2rem 1rem;
    border-radius: 8px;
}

#Testimonials h2 {
    font-size: 2.5rem;
    color: rgb(58, 58, 58);
    margin-bottom: 1rem;
    text-align: center;
}

#Testimonials p {
    font-size: 1.25rem;
    color: #ffffff;
    margin-bottom: 2rem;
    text-align: center;
}

/* Flip Card Container */
.flip-card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem; /* Increased space between cards */
    justify-content: center;
}

/* Flip Card Styling */
.flip-card {
    width: 100%;
    max-width: 350px; /* Maximum width of each card */
    height: 450px; /* Fixed height for better aspect ratio */
    perspective: 1000px; /* Adds 3D effect */
    margin: 1rem; /* Margin around cards */
    position: relative;
    border-radius: 8px; /* Rounded corners */
    overflow: hidden; /* Ensure content fits within the card */
}

/* Flip Card Inner Container */
.flip-card-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 1.2s;
    transform-style: preserve-3d;
}

/* Flip Card Hover Effect */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Flip Card Front and Back */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Flip Card Front */


.flip-card-front img {
    width: 100%;
    height: 100%; /* Full height of the card */
    object-fit: cover; /* Ensures image covers the available space */
}

/* Flip Card Back */
.flip-card-back {
    background-color: #6c757d; /* Grey background */
    color: rgb(255, 255, 255);
    transform: rotateY(180deg);
    padding: 1rem; /* Padding inside the card */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers the content */
    text-align: center;
}

/* Responsive adjustments */


@media (max-width: 767px) {
    .flip-card {
        max-width: calc(100% - 2rem); /* One card per row on small screens */
    }
}

@media (max-width: 400px) {
    #Testimonials h2 {
        font-size: 2rem; /* Adjust font size for smaller screens */
    }

    #Testimonials p {
        font-size: 1rem; /* Adjust font size for smaller screens */
    }

    .flip-card {
        height: auto; /* Adjust height to maintain aspect ratio on very small screens */
    }
}







/* Styling for FAQ section */
#faq {
    padding: 4vh 2vw; /* Padding for better spacing */
    border-radius: 8px;
    margin: 0 auto; /* Center the section */
    max-width: 100%; /* Ensure it fits the viewport */
}

/* FAQ Heading */
#faq h2 {
    font-size: 4vw; /* Font size for heading */
    color: #3a3a3a;
    margin-bottom: 2vh;
    text-align: center;
}

/* FAQ Section Description */
#faq p {
    font-size: 2.5vw; /* Font size for description */
    color: #3a3a3a;
    margin-bottom: 4vh;
    text-align: center;
}

/* FAQ Card styling */
.faq-card {
    border: none;
    border-radius: 8px;
    margin-bottom: 2vh; /* Space between cards */
    background-color: #495057;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 1vh; /* Padding inside cards */
}

/* Card Header Styling */
.faq-card .card-header {
    background-color: transparent;
    border: none;
    padding: 0.5vh 1vw; /* Padding inside header */
}

/* Button styling in card header */
.faq-card .card-header .btn-link {
    width: 100%;
    text-align: left;
    font-size: 2vw; /* Font size for button text */
    color: #f8f9fa;
    text-decoration: none;
    padding: 0;
}

/* Button hover and focus styling */
.faq-card .card-header .btn-link:hover,
.faq-card .card-header .btn-link:focus {
    text-decoration: none;
    color: #adb5bd;
    outline: none;
}

/* Card Body Styling */
.faq-card .card-body {
    font-size: 1.5vw; /* Font size for card body text */
    color: #f8f9fa;
    padding: 1vh 1vw; /* Padding inside card body */
}

/* Remove focus outline */
.faq-card .btn-link:focus {
    box-shadow: none;
}

/* Remove zoom effect on hover */
.faq-card:hover {
    transform: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #faq h2 {
        font-size: 6vw; /* Adjust font size for smaller screens */
    }

    #faq p {
        font-size: 4vw; /* Adjust font size for smaller screens */
    }

    .faq-card .card-header .btn-link {
        font-size: 4vw; /* Adjust font size for smaller screens */
    }

    .faq-card .card-body {
        font-size: 3vw; /* Adjust font size for smaller screens */
    }
}

@media (max-width: 576px) {
    #faq h2 {
        font-size: 8vw; /* Further adjust font size for very small screens */
    }

    #faq p {
        font-size: 5vw; /* Further adjust font size for very small screens */
    }

    .faq-card .card-header .btn-link {
        font-size: 5vw; /* Further adjust font size for very small screens */
    }

    .faq-card .card-body {
        font-size: 4vw; /* Further adjust font size for very small screens */
    }
}