body {
    background-color: #fbf6f2;
}

/*Fonts */
body {
    font-family: 'Lato', sans-serif;
}

h1, h2, h3, h4 {
    font-family: 'Playfair Display', serif;
}

/*Section: Nav Bar */
   /* Custom styles for the dropdown items hover effect */
.dropdown-item:hover {
    background-color: #33432d !important; /* Darker green shade */
}

/* Bootstrap offcanvas by default is width: 400px, so this new media query will only change it when the screen is narrower.*/
@media (max-width: 768px) {
    .offcanvas-end {
      width: 60% !important;
    }
  }

/* Hover effect for nav links */
.nav-link:hover {
    background-color: #33432d !important; /* Light gray or any hover color you like */
}

/* Section: Carousel */
#myCarousel .carousel-item img {
    height: 450px; /* Set desired height 450px*/
    object-fit: cover; /* Ensures the image covers the area without stretching */
}

   /* Custom button styles */
.custom-btn {
    background-color: #8A6240 !important;
    color: #CABA9C !important;
    border: none;
}

   /* Custom button styles for Café Menu */
.custom-btn-achievements {
    background-color: #CABA9C !important;
    color: #8A6240 !important;
    border: none;
}

.custom-btn-discover{
    background-color: #CABA9C !important;
    color: #8A6240 !important;
    border: none;
}

   /* Optional: Add hover effect */
.custom-btn:hover, .custom-btn-achievements:hover, .custom-btn-discover:hover {
    background-color: #7a6f5d !important; /* Darker shade of #CABA9C */
    color: #ddc9b9 !important; /* Darker shade of #8A6240 */
}


/*Section: Services */
#services {
    height: 100%; /* Ensure the body and html take full height */
    margin: 0; /* Remove default margin */
}

.center-container {
    display: flex !important; /* Use flexbox */
    justify-content: center !important; /* Horizontally center */
    align-items: center !important; /* Vertically center */
    height: 60%; 
}

/*Section: About Me */
img.img-fluid {
    width: 100%; /* Takes full width of the container */
    height: 500px; /* Adjust height as needed */
    object-fit: cover; /* Ensures the image doesn't get distorted */
}

/*Section: Contact */
section.bg-light {
  background-color: rgba(247, 234, 51, 0) !important; 
} /*There might be another CSS rule overriding, you can try increasing specificity or using !important*/

.container-contact {
    background-color: rgba(255, 255, 255, 0.3); /* White with 40% transparency */
    backdrop-filter: blur(10px); /* Optional frosted-glass effect */
    padding: 20px;
}

/* .btn{
    color: #ddc9b9;
} */

.container-contact h2, .container-contact h4{
    color: #8A6240 !important;
}
div .text-secondary{
    color: #8A6240 !important;
}

div.d-flex .text-secondary {
    color: #8A6240 !important;
}

div .link-secondary{
    color: #8A6240 !important;
}

/* Section: Reviews */
.slider-container {
    width: 80%; /*the space to take up*/
    margin: auto;
}

.card {
    background: #fff;
    padding: 10px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    margin-left: 10px;
    margin-right: 10px;
}

.card-title img {
    font-size: 30px;
    color: #4A148C;
}

.template-demo p {
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
}

.row {
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-pic {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 10px;
}

.profile {
    font-weight: bold;
}

.cust-name {
    font-weight: bold;
}

.cust-profession {
    font-size: 12px;
    color: gray;
}