:root {
    --primary-color: #3b2d86 !important;
    --primary-color-dark: #2f246b !important;
    --secondary-color: #8779d2 !important;
}

body {
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
    color: #8779d2;
    font-size: x-large;
}

a {
    text-decoration: none;
    color: inherit;
}

.center-vertically-wrapper {
    position: relative;
}

.text-size-3x-large {
    font-size: xxx-large;
}

.text-size-2x-large {
    font-size: xx-large;
}

.text-size-large {
    font-size: large;
}

.text-size-medium {
    font-size: medium;
}

.text-size-small {
    font-size: small;
}

.text-align-left {
    text-align: left;
}

.center-vertically {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);

}

nav.navbar {
    padding-top: 0;
    padding-bottom: 0;
    height: 110px;
}

nav.navbar a img {
    height: 100px;
}

nav.navbar .nav-item {
    padding-right: 20px;
}

iframe {
    min-height: 100%;
}

.no-show {
    display: none;
}

.giant-bees-container {
    background-image: url('/img/giant_ants_and_family.webp');
    width: 100vw;
    height: 1000px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}

.giant-bees-container .text-panel h1 {
    padding-bottom: 20px;
}

.cta-panel {
    padding: 20px 20px 1px 20px;
}

.cta-panel form {
    padding: 20px;
}

.cta-panel form .row {
    margin-bottom: 10px;
}

.cta-panel .btn-primary {
    background-color: #3b2d86 !important;
    border-color: #2f246b !important;
}

.cta-panel .btn-primary:hover,
.cta-panel .btn-primary:active,
.cta-panel .btn-primary:visited {
    background-color: #8779d2 !important;
    border-color: #2f246b !important;
}

.opt-in-wrapper {
    position: relative;
    padding-left: 30px;
}

.opt-in-checkbox {
    transform: scale(2);
    position: absolute;
    top: 5px;
    left: 5px;
    cursor: pointer;
}

.giant-bees-container .cta-panel {
    background: rgba(0, 0, 0, .5);
    padding: 20px 20px 1px 20px;
}

.top-padded-container {
    padding-top: 120px;
}

.trans-container .logo-panel img {
    max-width: 100%;
}

.trans-container .text-panel div {
    width: 100%;
    background-color: #3b2d86;
    color: white;
    padding: 20px 40px;
    margin-bottom: 20px;
    text-align: left;
}

.trans-container .text-panel img {
    max-width: 100%;
}

.services-container .services-content {
    text-align: left;
}

.services-container .vermin-wrapper {
    padding: 20px;
    border-radius: 2px;
}

.services-container .vermin-wrapper:hover {
    background-color: #8779d2;
    color: white;
    cursor: not-allowed;
}

.cta-panel .panel-title {
    margin-bottom: 0;
}

.cta-container {
    margin-top: 100px;
    background-color: #3b2d86;
    padding-top: 30px;
    padding-bottom: 20px;
    color: white;
}

.cta-container button {
    margin-left: 40px;
}

.whychooseus-container {
}

.whychooseus-container .whychooseus-title {
    margin-bottom: 20px;
}

.whychooseus-container .whychooseus-content {
    text-align: left;
}

.peace-option-container {
}

.peace-option-container .img-panel img {
    max-width: 90%;
}

.peace-option-container .text-panel div {
    max-width: 100%;
    background-color: #3b2d86;
    color: white;
    padding: 40px;
    margin-bottom: 20px;
    text-align: left;
}

.navbar-collapse{
    background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
}

.map-container {
    margin-bottom: 40px;
}

.map-container .iframe-wrapper{
    min-height: 300px;
}

footer.py-3 {
    padding-bottom: 0 !important;
}

footer .footer-base {
    background-color: #2f246b;
    color: white;
    padding-top: 12px;
    font-size: large;
}

.scroll-top-btn {
    background-color: #3b2d86;
    border-radius: 100%;
    color: white;
    cursor: pointer;
    height: 60px;
    width: 60px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: none;
}

.scroll-top-btn:hover {
    background-color: #8779d2;
    color: white;
}


/* NEW CSS HERE */

:root {
    --nav-offset: 75px;
}

section {
    scroll-margin-top: var(--nav-offset);
}

#hero {
    background: url('/assets/images/hero.webp') no-repeat center center;
    width: 100vw;
    min-height: 75vh;
    background-size: cover;
    color: white;
}

#services .card-title{
    font-size: larger;
}

#services .card-text{
    font-size: medium;
}

.form-card{
    font-size: medium;
    text-align: left;
}


/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {

    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1450px;
    }

    .about-container {
        max-width: 1200px;
    }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 100vw;
    }

    nav.navbar {
        height: 70px;
    }

    nav.navbar a img {
        height: 60px;
    }

    .giant-bees-container {
        height: 800px;
        padding-top: 20px;
    }

    [class^="col-"] {
        margin-bottom: 5px;
    }

}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    body {
        font-size: large;
    }

    .giant-bees-container {
        height: 850px;
        padding-top: 20px;
    }

    [class^="col-"] {
        margin-bottom: 5px;
    }
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .giant-bees-container {
        height: 900px;
        padding-top: 20px;
    }
}