/* Body background */
body {
    background-color: var(--c-brand-light);
}

.counter-title {
    color: var(--c-brand-light);
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0;
    padding: 0;
    text-transform: capitalize;
}

/* Counter section styling */
#counter {
    background: linear-gradient(rgba(var(--c-brand-1-rgb), 0.2), rgba(0, 0, 0, 0.0)),
    url(../images/facade/facade-1.jpg) no-repeat center;
    background-size: cover; /* Ensure image covers the entire section */
    height: 50vh; /* Section is 80% of viewport height */
    width: 100%; /* Full page width */
    position: relative;
    z-index: 1;
}

/* Row Counter: Flexbox removed, Bootstrap takes care of centering */
.row-counter {
    /*border: 1px solid green; !* Debugging border *!*/
    width: 100%; /* Ensures full width within container */
    margin: 0; /* Remove default margins */
    text-align: center;
}

/* Counter Frame */
.counter-frame {
    display: inline-block; /* Keep it centered relative to its content */
    /*border: 1px solid red; !* Debugging border *!*/
    width: 100%; /* Optional: Modify if necessary */
    text-align: center; /* Center text content */
}

/* Title Box */
.animation-title-box {
    /*border: 1px solid darkblue; !* Debugging border *!*/
    width: 100%; /* Full width */
    text-align: center; /* Center content */
}

.animation-title-box h1 {
    color: var(--c-brand-light);
    font-size: 2.5rem;
    font-weight: 600;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

.counter-box h5 {
    color: var(--c-brand-light);
    font-size: 1.0rem;
    font-weight: 300;
    margin: 0;
    padding: 0;
}

.counter-box p {
    color: var(--c-brand-light);
    font-size: 1.0rem;
    font-weight: 300;
    margin: 0 0 10px 0;
    padding: 0;
}

/* Title Animation */
.title-animation {
    animation: pulse 1.5s infinite; /* Pulse animation effect */
    display: inline-block; /* Ensure the transform works */
    margin: 0 auto; /* Center the title */
}


.counter-box {
    margin: 30px 10px; /* Adjust the margin as needed */
    box-shadow: var(--s-box-shadow);
}

.countdown {
    font-size: 3rem; /* Adjust font size as appropriate */
    color: var(--c-brand-light); /* Set desired color (red in this case) */
    font-weight: bold; /* Make the countdown bold */
}


/*******************************
    ANIMATIONS
*******************************/

/*ANIMATION TITLE*/
@keyframes pulse {
    0% {
        transform: scale(1); /* Start at the original size */
    }
    50% {
        transform: scale(1.1); /* Slightly enlarged */
    }
    100% {
        transform: scale(1); /* Return to original size */
    }
}


.section-text-block-construction {
    background-color: var(--c-brand-dark);
    color: var(--c-brand-light);
    padding: 30px;
    margin: 0 0 30px 0;
    border-radius: 10px;
    border: 1px solid var(--c-brand-light);
    box-shadow: var(--s-box-shadow);

}

.section-text-block-construction h1 {
    color: var(--c-brand-light);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.5em 0;
    padding: 0;
    text-transform: capitalize;
}

.section-text-block-construction h5 {
    color: var(--c-brand-light);
    font-size: 1.0rem;
    font-weight: 400;
    margin: 0;
    padding: 0;
    text-transform: capitalize;
}


/*******************************
    ACCORDION CONSTRUCTION
*******************************/


/* Target the accordion button when it's opened */
.accordion-button:not(.collapsed) {
    background-color: var(--c-brand); /* Change to your desired color */
    color: white; /* Optionally change text color */
    font-weight: 300; /* Optional: Make the text bold */
}


/*MEDIA RESPONSIVE*/
@media only screen and (max-width: 2200px) {
    .countdown {
        font-size: 3.5em;
        /*color: #9CFE4E;*/
        width: 100%;
        height: 100%;
        /*margin-top: 150px;*/
    }
}

@media only screen and (max-width: 1950px) {
    .countdown {
        font-size: 3.0em;
        /*color: #9CFE4E;*/
        width: 100%;
        height: 100%;
        /*margin-top: 200px;*/
    }
}

/*my monitor is this one*/
@media only screen and (max-width: 1650px) {
    .countdown {
        font-size: 2.5em;
        /*color: #9CFE4E;*/
        width: 100%;
        height: 100%;
        /*margin-top: 200px;*/
    }
}

@media only screen and (max-width: 1350px) {
    .countdown {
        font-size: 2.0em;
        /*color: #9CFE4E;*/
        width: 100%;
        height: 100%;
        /*margin-top: 200px;*/
    }
}

@media only screen and (max-width: 1150px) {
    .countdown {
        font-size: 1.5em;
        /*color: #9CFE4E;*/
        width: 100%;
        height: 100%;
        /*margin-top: 250px;*/
    }
}

@media only screen and (max-width: 850px) {
    .countdown {
        font-size: 1.0em;
        /*color: #9CFE4E;*/
        width: 100%;
        height: 100%;
        /*margin-top: 250px;*/
    }
}

@media only screen and (max-width: 600px) {
    .countdown {
        font-size: 1.0em;
        /*color: #9CFE4E;*/
        width: 100%;
        height: 100%;
    }
}

@media only screen and (max-width: 575px) {
    .countdown {
        font-size: 1.0em;
        /*color: #9CFE4E;*/
        width: 100%;
        height: 100%;
        overflow-wrap: break-word;
    }
}