/* White-mode specific styles */
body.white-mode, html.white-mode {
    background-color: #FDF7E3 !important; /* Light background */
    color: #232323 !important;           /* Dark text */
}

/* Navbar adjustments for white mode */
body.white-mode .cid-sYde4BOUcJ .navbar {
    background-color: #FDF7E3;
    background: #FDF7E3;
}

body.white-mode .cid-sYcUZe2tFK {
    background-color: #FDF7E3;
}

/* White-mode link styles */
body.white-mode a {
    color: #232323 !important; /* Dark text for links */
}
body.white-mode h5.item-title a {
    color: #FDF7E3 !important;
}
body.white-mode h6.item-title a {
    color: #FDF7E3 !important;
}
/* Override color for h6 in white mode */
html.white-mode .blur-effect .item-content h6 {
    color: #FDF7E3 !important; /* Apply cream color */
  }

body.white-mode a:hover {
    color: #000000 !important; /* Slightly lighter on hover */
}

/* White-mode button adjustments */
body.white-mode .btn-white-mode {
    background-color: #232323; /* Dark background */
    color: #FDF7E3; /* Cream white text/icon */
}

body.white-mode .btn-white-mode:hover,
body.white-mode .btn-white-mode:focus {
    transform: scale(1.1) !important;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3) !important;
}

body.white-mode .btn-white-mode:active {
    transform: scale(0.98) translateY(2px) !important;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Dropdown adjustments for white mode */
body.white-mode .cid-sYde4BOUcJ .navbar.navbar-expand-lg .dropdown .dropdown-menu {
    background: #FDF7E3 !important;
    color: #232323 !important;
}

/* General white-mode adjustments for text */
body.white-mode .text-white {
    color: #232323 !important;
}

/* Dark-mode button adjustments */
.btn-white-mode {
    font-size: 0.8rem !important;
    padding: 0.1rem 0.25rem !important;
    border-radius: 4px !important;
    /* display: flex; */
    align-items: center !important;
    justify-content: center !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    background-color: #FDF7E3 !important; /* Cream white background */
    color: #232323 !important; /* Dark icon color */
    outline: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important; 
    color: 0.3s ease !important;
    transform: 0.2s ease !important; 
    box-shadow: 0.2s ease !important;
}

.btn-white-mode:hover,
.btn-white-mode:focus {
    transform: scale(1.1) !important;
    box-shadow: 0 2px 2px rgba(253, 247, 227, 0.15) !important;
}

.btn-white-mode:active {
    transform: scale(0.98) translateY(2px) !important;
    box-shadow: 0 2px 2px rgba(253, 247, 227, 0.15) !important;
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.mbr-section-title {
    animation: slideInFromLeft 1s ease-out forwards;
}

.mbr-section-subtitle {
    /* Hide the subtitle initially */
    opacity: 0;
    transform: translateX(100%);
    font-weight: 200 !important;
    /* Apply the animation */
    animation: slideInFromRight 1s ease-out forwards;
    animation-delay: 0.5s;
}

/* Keyframes for grow-and-fade-in animation */
@keyframes growAndFadeIn {
    0% {
        transform: scale(0.95);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Apply the animation to the card-box */
.card-box {
    animation: growAndFadeIn 1.5s ease-out forwards;
    opacity: 1; /* Ensure the element is visible after animation */
    transform: scale(1); /* Ensure the element is at full size after animation */
}

/* Override padding for mobile and tablet devices */
@media (max-width: 990px) {
    .cid-sYcSud468C,
    .cid-sYcUZe2tFK,
    .cid-sYcVuzIK6F,
    .cid-sYcVMa9euc,
    .cid-sYcWl3ToMa,
    .cid-sYcWMbZmhd,
    .cid-sYcXMYmQEf,
    .cid-sYcY6SGuW8,
    .cid-sYd0Iv1DnP,
    .cid-sYd4Nbwsvd,
    .cid-sYd6xXmvMx,
    .cid-sYdaunwte7,
    .cid-sYde4BOUcJ,
    .cid-sYuEckrwT3,
    .cid-sYuG3GYMZz,
    .cid-sYuJrnH0Uz,
    .cid-sYuKn3crlq,
    .cid-sYuQ2uYMOR,
    .cid-sYy3KzO8jB,
    .cid-sYy4WGc1a5,
    .cid-sYy6999VEB,
    .cid-sYyh4uZLx7,
    .cid-sYyiuXc0wc,
    .cid-sYyj7v8vtn,
    .cid-sYym8K8MER,
    .cid-sYyBSOOw1q,
    .cid-sYyCGxfZYi,
    .cid-sYyDsE2ljj,
    .cid-sYyEGSn8Xx,
    .cid-sYyGyqzqN2,
    .cid-sYyHpge7eS,
    .cid-sYyLmv1OX1,
    .cid-sYyMlc7FTz,
    .cid-sYyNFx4HEQ,
    .cid-sYyOq4qKNW,
    .cid-sYyPAcaCV6,
    .cid-sYyRbZ7WIB,
    .cid-sYyS1HW0iq,
    .cid-sYySX3si55,
    .cid-sYyU363SW7,
    .cid-sYyVteu0fU,
    .cid-sYyXlRK8NT,
    .cid-sYyXZQur37,
    .cid-sYz0aL5kjv,
    .cid-sYzcZb0335,
    .cid-sYzedU1Gad,
    .cid-sYzfiJDsPH,
    .cid-sYzgeaNp8a,
    .cid-sYzhlEUHG8,
    .cid-sYzif0GJkx,
    .cid-sYzj3SQym4,
    .cid-sYzktfjDOc,
    .cid-sYzkVAdoYi,
    .cid-sYzxezLcLU,
    .cid-sYzye7E4oc {
        padding-top: 2rem !important;
        padding-bottom: 0rem !important;
    }
}

@media (max-width: 990px) {
    .display-7 {
	font-family: 'cormorant';
	font-size: 1.1rem !important;
	line-height: 1.5
}
}

/* Add this to your CSS file or in a <style> tag in the <head> */
img {
    opacity: 0 !important;
    transition: opacity 2s ease-in-out !important;
}

img.loaded {
    opacity: 1 !important;
}