html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}
.main-menu-button {
    display: inline-block; /* Allows padding and margin to be applied, while flowing inline with text/other buttons if present */
    padding: 15px 32px; /* Ample padding for a good touch target on mobile devices */
    background-color: #4e9af1; /* A pleasant blue color, can be customized */
    color: white; /* White text for contrast */
    text-align: center; /* Centers the text within the button */
    text-decoration: none; /* Removes the default underline from the anchor tag */
    border-radius: 8px; /* Rounded corners for a modern look */
    font-size: 16px; /* Appropriate font size */
    cursor: pointer; /* Changes the cursor to a hand icon on hover */
    transition: background-color 0.3s, transform 0.2s; /* Smooth transitions for hover effects */
    margin: 4px 2px; /* Provides a small margin around the button */
}

    .main-menu-button:hover {
        background-color: #4095c6; /* Slightly darker blue on hover for visual feedback */
        transform: translateY(-2px); /* Subtle lift effect on hover */
    }

/* Container for centering the button on the page */
.button-container {
    text-align: center; /* Centers the inline-block button within its parent div */
    margin: 20px 0; /* Adds some space above and below the button */
}

/* Media query for responsiveness on smaller screens */
@media all and (max-width: 30em) {
    .main-menu-button {
        display: block; /* Stacks buttons vertically on very small screens */
        margin: 0.4em auto; /* Centers the block-level button horizontally */
        width: 80%; /* Makes the button take up most of the screen width */
    }
}

.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;
}

.carousel-inner img {
    height: 400px; /* Set a fixed height for the images */
    object-fit: cover; /* Maintain aspect ratio while covering the div */
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    background-color: rgba(0,0,0,0.5); /* Semi-transparent background for controls */
}

.labellocation {
    position: relative;
    bottom:110px;
    left: 1px;
    font-size: 16px;
    color: coral;
    font-weight: bolder;
}
/* container */
feature-compare {
    display: flex;
    margin-top: 2.5em;
}

    /* columns */
    feature-compare > * {
        position: relative;
        padding: 0;
        text-align: center;
        width: 25%;
    }

    feature-compare > :nth-child(2) {
        width: 50%;
        z-index: 10;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 25%);
    }

        feature-compare > :nth-child(2):before {
            content: "DBE Home Education";
            display: block;
            position: absolute;
            top: -2em;
            left: 0;
            right: 0;
            line-height: 2em;
            background: #000;
            color: #fff;
            border-top-left-radius: .4em;
            border-top-right-radius: .4em;
        }
.filter {
    width: 850px;
    padding: 25px;
    border: 1px solid black;
    margin: 25px;
}

.tags {
    display: table;
}

.col {
    width: 800px;
    display: table-row;
    /* set to whatever width works for you */
    /*float: left; */
    /* put the columns next to each other */
    /*margin-right: 10px; */
    /* add some space between columns */
}

    .col label {
        display: table-cell;
    }

provinces {
    background: #f5d55f;
}

personnel {
    background: #f99e50;
}

contacts {
    background: coral;
}

/* features */
feature-compare ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
}

feature-compare li {
    white-space: nowrap;
    line-height: 2.2em;
    border-top: 1px solid #eee;
}

    feature-compare li:first-child {
        border-top: 0;
    }

    feature-compare li.tick:before {
        content: '✓ ';
        color: #006e37;
        font-weight: bold;
        font-size: 1.3em;
    }

    feature-compare li.cross:before {
        content: '✗ ';
        color: #ec1358;
        font-weight: bold;
        font-size: 1.3em;
    }

feature-compare h3 {
    margin: 0;
    padding: .4em 0 0;
}

feature-compare .price {
    margin: 0 0 .2em;
    font-size: 2em;
    font-weight: bold;
}

feature-compare span {
    display: none;
}

/* buttons */
feature-compare .button {
    display: inline-block;
    margin: .5em 0;
    padding: .4em .5em;
    background: #fff;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    border-radius: .4em;
}

feature-compare > :nth-child(2) .button {
    background: #000;
    color: #fff;
}

/* tablet breakpoint */
@media (min-width:900px) {
    feature-compare {
        margin: 2.5em calc(8px + 1.5625vw);
    }

        feature-compare > * {
            width: calc(100% / 3);
        }

        feature-compare span {
            display: inline;
        }
}
.smallInput {
    width: 200px !important;
    background-color: #F2F2F2 !important;
    color: #C6C6C6;
    border-color: #ddd;
}
.containers {
    display: flex; /* Enables Flexbox */
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    height: 200px; /* Set a specific height for the container */
    border: 1px solid #ccc; /* Optional: adds a border to visualize the container */
}