@media screen and (max-width: 1199.9px) {
    .banner-section {
        margin: 0;
    }
}
@media screen and (max-width: 991.9px) {
    .container {
        padding: 0 12px;
    }
    .site-header {
        padding: 16px 0;
    }
    .mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        z-index: 99;
    }
    button.hamburger {
        width: 32px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 6px;
        border: none;
        background: transparent;
        padding: 4px 0;
    }
    button.hamburger span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: var(--primary);
        border-radius: 2px;
        -webkit-transition: all 0.33s;
        transition: all 0.33s;
        position: relative;
        top: 0;
    }
    body.active-menu button.hamburger span:first-child {
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
        top: 9px
    }
    body.active-menu button.hamburger span:nth-child(2) {
        opacity: 0;
    }
    body.active-menu button.hamburger span:last-child {
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        top: -9px;
    }
    #siteNavigation {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: var(--contrast);
        z-index: 9;
    }
    nav.navmenu {
        padding: 100px 12px 32px;
        flex-direction: column;
    }
    body.admin-bar nav.navmenu {
        padding-top: 150px;
    }
    nav.navmenu ul {
        flex-direction: column;
    }
    nav.navmenu ul li a {
        color: var(--primary);
    }
    .navbar-extra-content .primary-transparent {
        background-color: transparent;
    }
    .navbar-extra-content .primary-transparent:hover {
        background-color: var(--primary);
    }
    .banner-right {
        max-width: 550px;
        margin: 0 auto;
    }

}
@media screen and (max-width: 767.9px) {
    h1 {
        font-size: 48px;
        line-height: 1.17;
    }
    h2 {
        font-size: 36px;
        line-height: 1.2;
    }
    h3 {
        font-size: 30px;
    }
    p.large {
        font-size: 20px;
        line-height: 1.33;
    }
    .site-footer {
        padding: 32px 0;
    }
    .about-section, .teaser-article-content, .contact-section, .banner-section {
        padding: 60px 0;
    }
    .about-section h2 {
        margin-bottom: 48px;
    }
    .full-height-about-box {
        padding: 24px;
        gap: 24px;
    }
    .single-about-box, .single-teaser-article, .founder-box, .who-we-box, .our-goal-box, .founder-journey, .contact-form-content {
        padding: 24px;
    }
    .teaser-article-section {
        padding: 0;
    }
    .teaser-article-content::after {
        width: calc(100% + 24px);
        left: -12px;
        border-radius: 0;
    }
    .who-we-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    .goal-heading {
        margin-bottom: 48px;
    }
    .banner-capsul {
        top: 16px;
        right: 16px;
        width: calc(53.23% - 32px);
        height: calc(56.25% - 32px);
    }
    .banner-right-content {
        width: calc(53.23% - 32px);
        height: calc(56.25% - 32px);
        bottom: 16px;
        left: 16px;
        padding: 16px;
    }
    .banner-right-content p {
        font-size: 14px;
    }
    .banner-right-content .read-article {
        font-size: 14px;
    }
    .banner-right-content .read-article img {
        width: 10px;
    }
}
@media screen and (max-width: 575.9px) {
    .buttons-group {
        flex-direction: column;
        align-items: stretch;
    }
}