.custom-bg {
                background-color: #15723d;
            }
            .custom-bg2 {
                background-color: #F2AA01;
            }
            .custom-bg3 {
                background-color: #08452C;
            }
            .custom-bg4 {
                background-color: #f4edde;
            }
            /* Spinner styles */
            #spinner {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(255, 255, 255, 0.9);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 9999;
            }
            #spinner.hidden {
                display: none;
            }
            .buttonMore {
            display: inline-block;
            border-radius: 40px;
            border: none;
            color: #FFFFFF;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            padding: 10px;
            width: 330px;
            transition: all 0.5s;
            cursor: pointer;
            margin: 5px;
            }

            .buttonMore span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
            }

            .buttonMore span:after {
            content: '\00bb';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
            }

            .buttonMore:hover span {
            padding-right: 25px;
            }

            .buttonMore:hover span:after {
            opacity: 1;
            right: 0;
            }
            /* Custom styles for carousel indicators */
            .carousel-indicators {
                bottom: 10px;
                margin-bottom: 1rem;
            }
            .carousel-indicators [data-bs-target] {
                width: 12px !important;
                height: 12px !important;
                border-radius: 50% !important;
                background-color: transparent;
                border: 2px solid #ffffff;
                opacity: 1;
                margin: 0 5px;
                padding: 0 !important;
                box-sizing: border-box;
                background-clip: padding-box;
            }
            .carousel-indicators .active {
                background-color: transparent;
                border: 2px solid #ffffff;
            }
            .carousel-indicators [data-bs-target]:not(.active) {
                background-color: #ffffff;
            }
            /* Navbar styles */
            .navbar {
                background-color: #F2AA01;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                transition: transform 0.6s ease-in-out;
                z-index: 1040;
                position: relative;
            }
            .navbar:not(.fixed-nav) {
                position: relative;
                transform: translateY(0);
            }
            .navbar-nav {
                flex-wrap: nowrap !important;
            }
            .nav-item {
                min-width: 0;
            }
            .nav-link {
                white-space: nowrap;
                text-align: center;
            }
            .navbar.fixed-nav {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                z-index: 1030;
                transform: translateY(-100%);
            }
            .navbar.fixed-nav.visible {
                transform: translateY(0);
            }
            .navbar-brand img {
                max-height: 50px;
            }
            .navbar-brand img {
                height: 200px;
                width: 230px;
            }
            .offcanvas {
                z-index: 1040;
            }
            body.navbar-fixed {
                padding-top: 56px;
            }
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            @keyframes fadeOut {
                from { opacity: 1; }
                to { opacity: 0; }
            }
            .fade-in {
                animation: fadeIn 1.5s ease-in forwards;
            }
            .fade-out {
                animation: fadeOut 1.5s ease-out forwards;
            }
            .dropdown-menu {
                z-index: 1050;
                position: absolute;
            }
            .navbar-collapse {
                overflow: visible;
            }
            /* Carousel caption styles */
            .carousel-inner {
                overflow: visible; /* Prevent caption clipping */
            }
            .carousel-inner img {
                width: 100%;
                height: auto;
                min-height: 200px; /* Ensure space for captions */
                object-fit: cover; /* Prevent image distortion */
            }
            .carousel-caption {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 90%;
                padding: 10px;
                text-align: center;
                box-sizing: border-box;
                overflow-wrap: break-word; /* Ensure long words wrap */
            }
            .carousel-caption p,
            .carousel-caption h1,
            .carousel-caption h2,
            .carousel-caption h4 {
                white-space: normal;
                word-wrap: break-word;
                margin: 0 auto;
                color: #fff;
            }
            .carousel-caption p.lead,
            .carousel-caption h2.lead,
            .carousel-caption h4.lead {
                font-size: 25px; /* Larger for normal screens */
                line-height: 1.4;
            }
            .carousel-caption h1 {
                font-size: 50px; /* Larger for normal screens */
                line-height: 1.2;
                font-weight: bold;
                text-transform: uppercase;
            }
            .carousel-caption h2 {
                font-size: 25px; /* Align with lead for normal screens */
                line-height: 1.4;
                font-weight: normal;
                margin-top: 10px;
            }
            .carousel-caption h4 {
                font-size: 25px; /* Align with lead for normal screens */
                line-height: 1.4;
                font-weight: normal;
                margin-top: 10px;
            }
            /* Hide specific elements on small screens */
            .carousel-caption p.hide-on-small,
            .carousel-caption h2.hide-on-small,
            .carousel-caption h4.hide-on-small {
                display: block;
            }
            @media (max-width: 950px) {
                .carousel-inner img {
                    min-height: 180px; /* Slightly smaller for mobile */
                }
                .carousel-caption {
                    width: 100%;
                    padding: 6px;
                }
                .carousel-caption p.lead,
                .carousel-caption h2.lead,
                .carousel-caption h4.lead {
                    font-size: 12px;
                    line-height: 1.6;
                }
                .carousel-caption h1 {
                    font-size: 16px;
                    line-height: 1.4;
                }
                .carousel-caption h2 {
                    font-size: 12px;
                    line-height: 1.6;
                }
                .carousel-caption h4 {
                    font-size: 12px;
                    line-height: 1.6;
                }
                .carousel-caption p.hide-on-small,
                .carousel-caption h2.hide-on-small,
                .carousel-caption h4.hide-on-small {
                    display: none; /* Hide specified elements on small screens */
                }
                /* Remove column offsets and constraints */
                .carousel-caption .col-md-10,
                .carousel-caption .col-lg-7,
                .carousel-caption .col-xl-6,
                .carousel-caption .col-xxl-5 {
                    width: 100%;
                    margin: 0;
                    padding: 0;
                    text-align: center;
                }
            }
            @media (max-width: 700px) {
                .carousel-caption {
                    width: 100%;
                    padding: 5px;
                }
                .carousel-caption p.lead,
                .carousel-caption h2.lead,
                .carousel-caption h4.lead {
                    font-size: 10px;
                    line-height: 1.6;
                }
                .carousel-caption h1 {
                    font-size: 14px;
                    line-height: 1.5;
                }
                .carousel-caption h2 {
                    font-size: 10px;
                    line-height: 1.6;
                }
                .carousel-caption h4 {
                    font-size: 10px;
                    line-height: 1.6;
                }
            }
            @media (min-width: 800px) {
                .carousel-inner img {
                    min-height: 300px; /* Larger height for normal screens */
                }
            }
            body {
                overflow-x: hidden; /* Disable horizontal scrolling */
            }
            article {
                overflow: hidden; /* Hide overflowing content */
                border-radius: 20px;
            }
            #articleInside {
                
                border-radius: 25px;
            }
            h1 {
                font-size: 58px; /* Default size for larger screens */
                word-wrap: break-word; /* Ensure long words wrap */
                overflow-wrap: break-word; /* Prevent text overflow */
            }

            @media (max-width: 768px) {
                h1 {
                    font-size: 36px; /* Smaller font size for tablets */
                }
            }

            @media (max-width: 576px) {
                h1 {
                    font-size: 28px; /* Smaller font size for mobile devices */
                }
            }

            h1.custom-bg2 {
                font-size: 38px; /* Default size for larger screens */
                word-wrap: break-word; /* Ensure long words wrap */
                overflow-wrap: break-word; /* Prevent text overflow */
                display: inline-block; /* Ensure the background color wraps the text */
                text-align: center; /* Center the text */
                padding: 10px 20px; /* Add padding for the box effect */
                border-radius: 8px; /* Optional: Add rounded corners */
            }

            @media (max-width: 768px) {
                h1.custom-bg2 {
                    font-size: 28px; /* Smaller font size for tablets */
                    padding: 8px 16px; /* Adjust padding for smaller screens */
                }
            }

            @media (max-width: 576px) {
                h1.custom-bg2 {
                    font-size: 20px; /* Smaller font size for mobile devices */
                    padding: 6px 12px; /* Further adjust padding for mobile */
                }
            }
            #cardPic {
                width: 600px;
                border-radius: 15px;
            }
            @keyframes slideLeft {
                from {
                    transform: translateX(100%);
                    opacity: 0;
                    border-radius: 20px;
                }
                to {
                    transform: translateX(0);
                    opacity: 1;
                    border-radius: 20px;
                }
            }

            .slide-left {
                animation: slideLeft 1s ease-out forwards;
            }

            :root {
                color-scheme: light;
            }
    
            @media (prefers-color-scheme: dark) {
                html {
                    background-color: #FFFFFF;
                    color: #000000;
                }
            }