html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.logo-container> u {
    text-decoration: underline;
    text-decoration-color: #ff0000; /* Red underline */
    font-size:3rem;
}

/* WORD-ROTATION */
.words-wrapper {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    font-size: 2rem; /* Adjust as needed */
}

.words {
    display: inline-flex;
    position: relative;
    overflow: hidden;
    vertical-align: baseline;
    width: var(--max-width, 200px); /* Default width, will be overwritten by JS */
    height: 1.2em;
    margin-left: 0.3em; /* Add some space between "We Deliver" and rotating words */
}

    .words span {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        white-space: nowrap;
        opacity: 0;
        transform: translateY(100%);
        transition: opacity 0.5s, transform 0.5s;
    }

        .words span.current {
            opacity: 1;
            transform: translateY(0);
        }

        .words span.prev {
            transform: translateY(-100%);
        }

        .words span.next {
            transform: translateY(100%);
        }

        .words-wrapper .words[data-animation="fade"] span {
            transition: opacity 0.5s;
        }

        .words-wrapper .words[data-animation="slide"] span {
            transition: opacity 0.5s, transform 0.5s;
        }

        .words-wrapper .words[data-animation="zoom"] span {
            transition: opacity 0.5s, transform 0.5s;
        }

@media (max-width: 700px) {
    .words-wrapper .words {
        width: var(--max-width-mobile) !important;
    }
}