html {
    font-size: 100%;
}

body {
    font-family: 'Lato', sans-serif;
    padding-top: 50px;
    padding-bottom: 20px;
    /*background-color: #f8f9fa;*/
    background-color: #E1E6EA;
}

.page-header {
    border-bottom: none;
}

/* Font color */
h1, h2, h3, h4, h5, h6 {
    color: #00A2C2;
}

.lead{
    line-height: 1.6;
}
    /* Set padding to keep content from hitting the edges */
    .body-content {
        padding-left: 15px;
        padding-right: 15px;
    }

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

.hero-section {
    padding: 40px 20px 0px !important;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}


.CountryBlock {
    text-align: center;
}

/*Below is just playing with animations...*/
/* Slide-in animation */
.animated-slide-left {
    animation: slideInLeft 1s ease-in-out;
}

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

    to {
        transform: translateX(0);
    }
}

/* Mobile fixes: stack vertically with spacing and center */
/* Responsive behavior */
@media (max-width: 991px) { /* Tablets and smaller laptops */
    .pill-group {
        gap: 12px;
    }

    .pill-btn {
        padding: 10px 24px;
        font-size: 17px;
    }

    .lead {
        font-size: 25px;
    }
}

@media (max-width: 767px) { /* Phones */
    .pill-group {
        flex-direction: column;
        align-items: center;
        gap: 18px; /* More vertical breathing room on mobile */
    }

    .pill-btn {
        width: 85%; /* Slightly wider for easy tapping */
        max-width: 360px;
        text-align: center;
    }
}

.btn-primary {
    color: #fff;
    background-color: #00A2C2;
    border-color: #2e6da4;

}
    .btn-primary:hover {
        background-color: #5eb1c2;
    }

.btn-default {
    color: #00A2C2;
}

    .btn-default:hover {
        background-color: #5eb1c2;
        color: white;
    }


/* Fade-in animation */
.animated-fade-in-normal {
    animation: fadeIn 2s ease-in-out;
}

.animated-fade-in-fast {
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

    .fade.show {
        opacity: 1;
    }

/*Above is just playing with animations...*/