* {
    font-family: "Montserrat", sans-serif;

}

.pacifico-regular {
    font-family: "Pacifico", cursive;
    font-weight: 400;
    font-style: normal;
}

.sigmar-regular {
    font-family: "Sigmar", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.globalpadding {
    padding: 10px 40px;
}

#hoverBtn {
    transition: background-color 0.3s ease;
}

#hoverBtn:hover {
    background-color: #009245;
}

#hoverBtn:hover svg path {
    fill: #ffffff;
}

#hoverBtn:hover {
    color: #ffffff;
}

.g1:hover {

    background: linear-gradient(to right, #2fbe13, transparent);

}


@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        /* Starts from off-screen to the right */
        opacity: 0;
        /* Invisible at the start */
    }

    100% {
        transform: translateX(0);
        /* Ends in its normal position */
        opacity: 1;
        /* Fully visible at the end */
    }
}

.animate__slideInRight {
    animation: slideInRight 1s ease-in-out forwards;
}




@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.onLoad {
    opacity: 0;
    transform: translateX(-100%);
    /* or use any other initial state that fits your needs */
}




.animate__slideInLeft {
    animation: slideInLeft 0.5s ease-in-out forwards;
}

.animate__delay {
    animation-delay: 0.5s;

}

.animate__delay-1s {
    animation-delay: 1.2s;
    /* Delay the animation by 1 second */
}

.animate__delay-2s {
    animation-delay: 2.2s;
    /* Delay the animation by 2 seconds */
}

.animate__delay-3s {
    animation-delay: 3.2s;
    /* Delay the animation by 3 seconds */
}


.custom-link {
    color: black;
    /* Normal color */
    text-decoration: none;
    /* Optional, to remove underline */
}

.custom-link:hover {
    color: #009245;
    /* Changes the color to green on hover */
}


.custom-link.active {
    color: #009245;
    /* Keeps the color green when on the current page */
}


.contact-link {
    color: white;
    /* Normal color */
    text-decoration: none;
    /* Optional, to remove underline */
}

.contact-link:hover {
    color: #065cac;

}


@keyframes slideInR {
    0% {
        transform: translateX(100%);
        /* Starts from off-screen to the right */
        opacity: 0;
        /* Invisible at the start */
    }

    100% {
        transform: translateX(0);
        /* Ends in its normal position */
        opacity: 1;
        /* Fully visible at the end */
    }
}

.animate-slideInR {
    animation: slideInR 1.5s ease-out forwards;
}


/* Animation for the sliding effect of the left section */
@keyframes slideIn {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

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

.animate-slideIn {
    animation: slideIn 1.5s ease-out forwards;
}

.mission__delay {
    animation-delay: 0.5s;

}

.mission__delay-1s {
    animation-delay: 1s;
    /* Delay the animation by 1 second*/
}

.mission__delay-2s {
    animation-delay: 1.5s;
    /* Delay the animation by 2 seconds*/
}

.mission__delay-3s {
    animation-delay: 2s;
    /* Delay the animation by 3 seconds*/
}

.m1 {
    opacity: 0;
    transform: translateX(-100%);
}
.m2 {
    opacity: 0;
    transform: translateX(100%);
}

/* Animation for the image fade-in */
@keyframes imageFadeIn {
    0% {
        opacity: 0;
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-imageFadeIn {
    animation: imageFadeIn 2s ease-in-out forwards;
}

/* Animation for the text fade-in */
@keyframes textFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-textFadeIn {
    animation: textFadeIn 1.8s ease-in forwards;
}

.v1 {
    opacity: 0;
    transform: translateX(-100%);
}

.v2 {
    opacity: 0;
    transform: translateY(100%);
}

/* .popup {
    opacity: 0;
    /* Initially invisible
    visibility: hidden;
    /* Ensure it's not clickable when hidden
    transition: opacity 1s ease, visibility 1s ease;
    /* Smooth transition
}

.popup.active {
    /* display: block;
    opacity: 1;
    visibility: visible;
}

#messageIcon {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease, visibility 1s ease;
}

#messageIcon.active {
    opacity: 1;
    visibility: visible;
} */


/* Keyframes for pulse animation */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(3, 150, 62, 0.7);
    }

    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(3, 150, 62, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(3, 150, 62, 0);
    }
}

/* Apply pulse animation to the button */
#scrollToTopBtn {
    animation: pulse 2s infinite;
    border-radius: 50%;
}


html {
    scroll-behavior: smooth;
}

.scroll-section {
    scroll-margin-top: 120px;
    /* Adjust based on your fixed navbar height */
}


/* Initially hide the message icon and the quote container */
.hidden {
    display: none;
}



#quoteDiv svg:hover {
    transform: scale(1.2);
    /* Slightly enlarge on hover */
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.animate__fadeIn {
    animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes wobble {

    0%,
    100% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(-5deg);
    }

    75% {
        transform: rotate(5deg);
    }
}

.micon.wobble {
    animation: wobble 0.5s ease-in-out infinite;
}

@keyframes slideInFromBottom {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-in-from-bottom {
    animation: slideInFromBottom 1s forwards;
    /* Adjust duration as needed */
}

.pl {
    opacity: 0;
    transform: translateY(100%);
    overflow: visible;
}

.s1 {
    opacity: 0;
    transform: translateY(100%);

}

.g1 {
    opacity: 0;
    transform: translateY(100%);

}

.os1 {
    opacity: 0;
    transform: translateY(100%);

}

.f1 {
    opacity: 0;
    transform: translateY(100%);

}