:root {
    --logo-color: #f79836;
    --primary-color: #a8cf45;
    --primary-color-dark: #0e844d;
    --text-dark: #333333;
    --white: #ffffff;
    --button: #0b3d26;

}

.home {
    position: relative;
}

.home .slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 80vh;
    padding: 2rem 7%;
    background-size: cover !important;
    background-position: center !important;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: none;
}

.home .slide.active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.home .slide .content span {
    color: var(--button);
    display: block;
    font-size: 2rem;
    -webkit-animation: fadeIn .4s linear .2s backwards;
    animation: fadeIn .4s linear .2s backwards;
}

.home .slide .content h3 {
    color: var(--button);
    text-transform: uppercase;
    padding: 1rem 0;
    font-size: 6rem;
    -webkit-animation: fadeIn .4s linear .4s backwards;
    animation: fadeIn .4s linear .4s backwards;
}

.home .slide .content .btn {
    -webkit-animation: fadeIn .4s linear .6s backwards;
    animation: fadeIn .4s linear .6s backwards;
}

.home #next-slide,
.home #prev-slide {
    position: absolute;
    bottom: 1rem;
    right: 3rem;
    height: 5rem;
    width: 5rem;
    line-height: 4.5rem;
    font-size: 3rem;
    color: var(--text-dark);
    border: 0.2rem solid var(--text-dark);
    background: var(--white);
    border-radius: .5rem;
    cursor: pointer;
    text-align: center;
}

.home #next-slide:hover,
.home #prev-slide:hover {
    background: var(--text-dark);
    color: var(--white);
}

.home #prev-slide {
    right: 9rem;
}

.btn {
    padding: .6rem 2rem;
    font-size: 1.5rem;
    color: var(--button);
    border: 0.2rem solid var(--button);
    background: none;
    cursor: pointer;
    border-radius: .5rem;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}

.btn:hover {
    background: var(--primary-color-dark);
    color: var(--white);
}

@media (max-width: 768px) {
    .home .slide {
        min-height: 19vh; /* Full viewport height */
        padding: 1rem 5%; /* Reduced padding for mobile */
    }

    .home .slide .content span {
        font-size: 1.5rem; /* Smaller font size for mobile */
    }
    .home .slide .content h3 {
        font-size: 2rem; /* Adjusted heading size */
    }

    .btn {
        padding: 0.5rem 1.5rem;
        font-size: 1.2rem;
    }

    .home #next-slide,
    .home #prev-slide {
        height: 2rem;
        width: 2rem;
        line-height: 1.5rem;
        font-size: 1rem;
        bottom: 5px;
 
    }
    .home #prev-slide {
        right: 3rem;
    }

    .home #next-slide{
        right: 10px;
    }
}