@font-face {
    font-family: Montserrat;
    src: url("Montserrat-Medium.woff2") format("woff2"),
    url("Montserrat-Medium.woff") format('woff');
    font-weight: 500;
}

@font-face {
    font-family: Montserrat;
    src: url("Montserrat-ExtraBold.woff2") format("woff2"),
    url("Montserrat-ExtraBold.woff") format('woff');
    font-weight: 800;
}

@font-face {
    font-family: "Suez One";
    src: url("SuezOne-Regular.woff2") format("woff2"),
    url("SuezOne-Regular.woff") format('woff');
    font-weight: 400;
}

:root {
    --gray-dark: #22282b;
}

#welcome-content {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

#welcome-content .section-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 3.5rem;
    line-height: 129%;
    color: var(--gray-dark);
    margin-bottom: 1rem;
}

@media (max-width: 1089px) {
    #welcome-content .section-title {
        font-size: 2.75rem;
        line-height: 127%;
    }
}

#welcome-content .section-subtitle {
    font-weight: 400;
    font-size: 1.31rem;
    line-height: 133%;
    color: var(--bs-gray-600);
}

@media (max-width: 1089px) {
    .d-desktop {
        display: none;
    }
}

@media (min-width: 1090px) {
    .d-mobile {
        display: none;
    }
}

/* Welcome */

.section-welcome {
    padding: 0 5rem 4rem;
}

@media (max-width: 1089px) {
    .section-welcome {
        padding: 0 1rem;
    }
}

.main-menu {
    height: 4.25rem;
    display: grid;
    grid-template: "logo menu buttons" 1fr
                 / 80px  auto max-content;
    align-items: center;
}

@media (max-width: 1089px) {
    .main-menu {
        padding: .875rem 0;
        grid-template: "logo buttons" 1fr
                      / 80px 1fr;
    }
}

.main-menu .menu A {
    padding: .5rem;
    font-weight: 400;
    line-height: 150%;
    color: var(--bs-gray-900);
    margin-right: .75rem;
    text-decoration: none;
}

.main-menu .menu A:hover {
    text-decoration: underline;
}

.main-menu .buttons {
    justify-self: end;
}

.main-menu .btn {
    width: 6rem;
    height: 2.5rem;
    margin-left: 1rem;
}

@media (max-width: 1089px) {
    .main-menu .btn {
        width: 5.5rem;
    }
}

A.github-link {
    text-decoration: none;
    color: var(--bs-gray-900);
}

A.github-link svg {
    width: 2rem;
    height: 2rem;
}

.main-menu .menu-button {
    background: none;
    border: none;
    padding: .63rem .5rem;
    width: 3rem;
    height: 3rem;
}

.main-menu .menu-button svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--bs-gray-600);
}

#sandwich-menu {
    max-width: 265px;
}

#sandwich-menu .offcanvas-body A {
    display: grid;
    place-items: center;
    height: 2.5rem;
}

#sandwich-menu .offcanvas-body A.btn {
    margin-bottom: 2rem;
}

#sandwich-menu .offcanvas-body A:not(.btn) {
    margin-bottom: 1rem;
    text-decoration: none;
    line-height: 150%;
    color: var(--bs-gray-900);
}

.btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0b898f;
    --bs-btn-border-color: #0b898f;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1aa0a6;
    --bs-btn-hover-border-color: #14979d;

    --bs-btn-focus-shadow-rgb: 11,137,143;

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #28aab0;
    --bs-btn-active-border-color: #14979d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);

    --bs-btn-disabled-color: #e6f4f5;
    --bs-btn-disabled-bg: #0b898f;
    --bs-btn-disabled-border-color: #0b898f;
}

.btn-outline-brand {
    --bs-btn-color: #0b898f;
    --bs-btn-border-color: #0b898f;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b898f;
    --bs-btn-hover-border-color: #0b898f;

    --bs-btn-focus-shadow-rgb: 15,182,191;

    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #0b898f;
    --bs-btn-active-border-color: #0b898f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);

    --bs-btn-disabled-color: #0b898f;
    --bs-btn-disabled-bg: #0000;
    --bs-btn-disabled-border-color: #0b898f;

    --bs-gradient: none;
}

.btn-mg {
    --bs-btn-font-size: 1.13rem;
    --bs-btn-padding-y: .875rem;
    --bs-btn-padding-x: 2.875rem;
}

@media (max-width: 1089px) {
    .btn-mg {
        --bs-btn-padding-x: .75rem;
    }
}

.bsd {
    font-family: 'Suez One', serif;
    font-size: 1.3rem;
}

.intro {
    margin-top: 2.5rem;
    display: grid;
    grid-template: "slogan  browser" min-content
                   "mission browser" min-content
                   "buttons browser" min-content
                 / 1fr      1fr;
    gap: 1.5rem;
}

@media (max-width: 1089px) {
    .intro {
        grid-template: "slogan" min-content
                       "mission" min-content
                       "buttons" min-content
                       "browser" min-content
                     / 1fr;
    }
}

.intro .slogan {
    grid-area: slogan;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 4rem;
    line-height: 125%;
    color: var(--gray-dark);
    background: url("../images/stroke.svg") 0 4.5rem no-repeat;
}

@media (max-width: 1089px) {
    .intro .slogan {
        font-size: 2.75rem;
        background: none;
    }
}

.intro .slogan B {
    font-weight: 800;
}

.intro .mission {
    grid-area: mission;
    font-weight: 400;
    font-size: 1.31rem;
    line-height: 133%;
    color: var(--bs-gray-600);
}

@media (max-width: 1089px) {
    .intro .mission {
        font-size: 1.13rem;
    }
}

.intro .get-started {
    grid-area: buttons;
    align-self: end;
    padding-top: 3.5rem;
}

@media (max-width: 1089px) {
    .intro .get-started {
        padding-top: .5rem;
        padding-bottom: .5rem;
    }
}

.intro .get-started .btn {
    margin-right: 1.5rem;
}

@media (max-width: 1089px) {
    .intro .get-started .btn {
        display: block;
        margin-right: 0;
    }
}

.intro .get-started .google-play {
    display: inline-block;
    border: 1.26px solid var(--bs-gray-300);
    border-radius: .375rem;
    padding: .44rem 1.44rem;
    width: 11.75rem;
    height: 3.5rem;
    text-align: center;
}

@media (max-width: 1089px) {
    .intro .get-started .google-play {
        display: block;
        width: unset;
        margin-top: 1rem;
    }

    .intro .get-started .google-play svg {
        width: 8.84rem;
        height: 2.62rem;
    }
}

.intro .browser {
    grid-area: browser;
    align-self: center;
}

.intro .browser .mockup {
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 1px 15px 0 rgb(0 0 0 / 25%);
}

.intro .browser .mockup .bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--gray-dark);
}

.intro .browser .mockup .bar .dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
}

.intro .browser .mockup .bar .red {
    background: #ff5f57;
}

.intro .browser .mockup .bar .yellow {
    background: #febc2e;
}

.intro .browser .mockup .bar .green {
    background: #28c840;
}

.intro .browser .mockup IMG {
    display: block;
    width: 100%;
    aspect-ratio: 1.7;
}

.vision {
    margin-top: 4.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem
}

@media (max-width: 1089px) {
    .vision {
        margin-top: 3rem;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
    }
}

.vision > DIV {
    border-radius: .75rem;
    padding: 2rem 2.5rem 2.5rem;
}

@media (max-width: 1089px) {
    .vision > DIV {
        padding: 1.5rem;
    }
}

.vision > DIV .icon {
    border-radius: 3rem;
    padding: .75rem;
    width: 3.5rem;
    height: 3.5rem;
    display: grid;
    place-items: center;
    margin-bottom: 1.25rem;
}

.vision > DIV .icon svg {
    width: 2rem;
    height: 2rem;
}

@media (max-width: 1089px) {
    .vision > DIV .icon {
        margin-bottom: 1rem;
    }
}

.vision > DIV .title {
    font-weight: 500;
    font-size: 1.31rem;
    line-height: 152%;
    color: var(--bs-gray-900);
}

.vision > DIV .description {
    font-weight: 400;
    font-size: 1rem;
    line-height: 150%;
    color: #3d3d3d;
}

.vision > DIV.magenta {
    background-color: #cdc3ff;
}

.vision > DIV.magenta .icon {
    background-color: #b6acf3;
}

.vision > DIV.blue {
    background-color: #aac9ff;
}

.vision > DIV.blue .icon {
    background-color: #93b3e9;
}

.vision > DIV.green {
    background-color: #92e3b8;
}

.vision > DIV.green .icon {
    background-color: #7ed4a8;
}

/* Strong points */

.section-strong-points {
    padding: 6rem 5rem 0;
}

@media (max-width: 1089px) {
    .section-strong-points {
        padding: 6rem 1rem 0;
    }
}

.section-strong-points .section-subtitle {
    max-width: 48rem;
}

.strong-points {
    margin-top: 3.375rem;
    border-collapse: collapse;
}

@media (max-width: 1089px) {
    .strong-points {
        margin-top: 2rem;
    }
}

.strong-points TD {
    border-top: 1px solid var(--bs-gray-300);
    padding: 2rem 0;
    vertical-align: top;
}

@media (max-width: 1089px) {
    .strong-points .item {
        border-top: 1px solid var(--bs-gray-300);
        padding: 1.5rem 0;
        display: grid;
        grid-template-columns: 4.5rem 1fr;
        align-items: center;
    }
}

.strong-points .icon {
    padding-right: 1.5rem;
}

.strong-points .icon svg {
    border-radius: 3rem;
    padding: 1rem;
    width: 4rem;
    height: 4rem;
    background-color: #0b898f;
    fill: white;
}

@media (max-width: 1089px) {
    .strong-points .icon svg {
        padding: .5rem;
        width: 3rem;
        height: 3rem;
    }
}

.strong-points .title {
    font-weight: 500;
    font-size: 1.69rem;
    line-height: 148%;
    color: var(--bs-gray-900);
    padding-left: 3.5rem;
    padding-right: 3.5rem;
}

@media (min-width: 1170px) {
    .strong-points .title {
        text-wrap: nowrap;
    }
}

@media (max-width: 1089px) {
    .strong-points .title {
        font-size: 1.5rem;
        line-height: 133%;
        padding-left: 0;
        padding-right: 0;
    }
}

.strong-points .description {
    font-weight: 400;
    font-size: 1.13rem;
    line-height: 133%;
    color: var(--bs-gray-600);
}

@media (max-width: 1089px) {
    .strong-points .description {
        margin-bottom: 2rem;
    }
}

/* About */

.section-about {
    margin-top: 1.5rem;
    padding: 6rem 5rem 4rem;
    background: #f0f3f9;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 1089px) {
    .section-about {
        margin-top: 4.5rem;
        padding: 3rem 1rem;
        grid-template-columns: 1fr;
        display: block;
    }
}

@media (min-width: 1090px) {
    .section-about .section-subtitle {
        padding-right: 1rem;
    }
}

@media (max-width: 1089px) {
    .section-about .links {
        margin-top: 2rem;
    }
}

.section-about .links A {
    display: grid;
    grid-template-columns: 3.5rem 1fr 2rem;
    gap: 2rem;
    border-radius: 1rem;
    padding: 2.5rem;
    background: white;
    text-decoration: none;
}

@media (max-width: 1089px) {
    .section-about .links A {
        gap: 1.25rem;
        padding: 1.25rem;
    }
}

.section-about .links A + A {
    margin-top: 2rem;
}

@media (max-width: 1089px) {
    .section-about .links A + A {
        margin-top: 1rem;
    }
}

.section-about .links A .icon {
    padding-top: .5rem;
}

@media (max-width: 1089px) {
    .section-about .links A .icon {
        padding-top: 0;
        align-self: center;
    }
}

.section-about .links A .icon svg {
    border-radius: 3rem;
    padding: .75rem;
    width: 3.5rem;
    height: 3.5rem;
    fill: white;
}

.section-about .links A.architecture .icon svg {
    background-color: #0fb6bf;
}

.section-about .links A.administration .icon svg {
    background-color: #487fde;
}

.section-about .links A.development .icon svg {
    background-color: #6b57cd;
}

.section-about .links A.license .icon svg {
    background-color: #ff7c04;
}

.section-about .links A .title {
    font-weight: 500;
    font-size: 1.69rem;
    line-height: 148%;
    color: var(--bs-gray-900);
}

@media (max-width: 1089px) {
    .section-about .links A .title {
        font-size: 1.4rem;
        line-height: 133%;
        margin-bottom: .5rem;
    }
}

.section-about .links A .description {
    font-size: 1.13rem;
    line-height: 133%;
    color: var(--bs-gray-600);
}

@media (max-width: 1089px) {
    .section-about .links A .description {
        font-size: 1rem;
        line-height: 150%;
    }
}

.section-about .links A .arrow svg {
    padding-top: .5rem;
    width: 1.5rem;
    height: 1.5rem;
}

/* Development */

.section-development {
    padding: 6rem 5rem 3rem;
}

@media (max-width: 1089px) {
    .section-development {
        padding: 3rem 1rem;
    }
}

.section-development .links {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;
    gap: 2rem;
}

@media (max-width: 1089px) {
    .section-development .links {
        margin-top: 2rem;
        display: block;
    }
}

.section-development .links A {
    display: grid;
    grid-template-columns: 2rem 1fr 2rem;
    gap: 2rem;
    border: 1px solid var(--bs-gray-300);
    border-radius: 1rem;
    padding: 2.5rem;
    text-decoration: none;
}

@media (max-width: 1089px) {
    .section-development .links A {
        gap: 1.25rem;
        padding: 1.25rem;
    }

    .section-development .links A + A {
        margin-top: 2rem;
    }

    .section-development .links A .icon {
        align-self: center;
    }
}

.section-development .links A .icon svg {
    width: 2rem;
    height: 2rem;
}

.section-development .links A .title {
    font-weight: 600;
    font-size: 1.31rem;
    line-height: 133%;
    color: var(--bs-gray-900);
    padding-right: 1.25rem;
}

@media (max-width: 1089px) {
    .section-development .links A .title {
        padding-right: .25rem;
    }
}

.section-development .links A .arrow svg {
    padding-top: .5rem;
    width: 1.5rem;
    height: 1.5rem;
}

/* Feedback */

.section-feedback {
    padding: 6rem 5rem 3rem;
    display: grid;
    grid-template: "title    form" 1fr
                   "contacts form" 1fr
                  / 1fr      1fr;
    gap: 1.5rem;
}

@media (max-width: 1089px) {
    .section-feedback {
        padding: 3rem 1rem;
        grid-template: "title" min-content
                       "form" min-content
                       "contacts" min-content
                      / 1fr;
    }
}

.section-feedback .section-title {
    grid-area: title;
}

.section-feedback .contacts {
    grid-area: contacts;
    align-self: end;
}

@media (max-width: 1089px) {
    .section-feedback .contacts {
        margin-top: 2rem;
        text-align: center;
    }
}

.section-feedback .contacts A.email {
    font-weight: 600;
    font-size: 1.69rem;
    line-height: 148%;
    color: var(--bs-gray-900);
    text-decoration: none;
}

@media (max-width: 1089px) {
    .section-feedback .contacts A.email {
        font-size: 1.31rem;
        line-height: 152%;
    }
}

.section-feedback .contacts A.email:hover {
    text-decoration: underline;
}

.section-feedback .contacts .social {
    font-size: 1.13rem;
    line-height: 133%;
    color: var(--bs-gray-600);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

@media (max-width: 1089px) {
    .section-feedback .contacts .social {
        margin-top: 1.5rem;
    }
}

.section-feedback .contacts .icon svg {
    width: 3.5rem;
    height: 3.5rem;
}

.section-feedback FORM {
    grid-area: form;
    border-radius: 1.5rem;
    padding: 2.5rem;
    background: #f0f3f9;
}

@media (max-width: 1089px) {
    .section-feedback FORM {
        padding: 1rem;
    }
}

.section-feedback FORM .form-control {
    margin-bottom: 1.25rem;
    padding: 1.13rem 1.56rem;
}

.section-feedback FORM TEXTAREA {
    min-height: 8.25rem;
}

.section-feedback FORM .bottom {
    display: grid;
    grid-template: "captcha captcha" min-content
                   "submit  policy" min-content
                   "google  google" min-content
                  / auto    auto;
    column-gap: 1.5rem;
}

@media (max-width: 1089px) {
    .section-feedback FORM .bottom {
        margin-top: -1rem;
        grid-template: "captcha" min-content
                       "submit" min-content
                       "policy" min-content
                       "google" min-content
                     / 1fr;
        row-gap: 1rem;
    }
}

.section-feedback FORM BUTTON {
    grid-area: submit;
}

.section-feedback FORM .privacy-policy {
    grid-area: policy;
    line-height: 150%;
    color: var(--bs-gray-900);
}

.section-feedback FORM .privacy-policy A {
    font-weight: 500;
    color: var(--bs-gray-900);
    text-decoration: none;
}

.section-feedback FORM .privacy-policy A:hover {
    text-decoration: underline;
}

.section-feedback FORM .google-policy {
    grid-area: google;
    font-size: .875rem;
    line-height: 133%;
    color: var(--bs-gray-400);
}

@media (min-width: 1090px) {
    .section-feedback FORM .google-policy {
        padding-top: 1rem;
    }
}

.section-feedback FORM .google-policy A {
    font-weight: 500;
    color: var(--bs-gray-400);
    text-decoration: none;
}

.section-feedback FORM .google-policy A:hover {
    text-decoration: underline;
}

/* Footer */
FOOTER {
    padding: 3rem 5rem 1.75rem;
}

@media (max-width: 1089px) {
    FOOTER {
        padding: 1.5rem 1rem;
    }
}

FOOTER .upper {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--bs-gray-300);
    display: grid;
    grid-template-columns: 11rem 1fr 11rem;
    gap: 2rem;
}

@media (max-width: 1089px) {
    FOOTER .upper {
        padding-bottom: 1rem;
        grid-template-columns: 1fr 11rem;
        gap: 1rem;
        align-items: center;
    }
}

FOOTER .upper A.privacy-policy {
    justify-self: center;
    font-weight: 500;
    color: var(--bs-gray-900);
    text-decoration: none;
}

FOOTER .upper A.privacy-policy:hover {
    text-decoration: underline;
}

FOOTER .upper .israel-support {
    justify-self: end;
    font-weight: 500;
    line-height: 150%;
    color: var(--bs-gray-900);
}

@media (max-width: 1089px) {
    FOOTER > A.privacy-policy {
        display: block;
        padding: 1rem 0;
        border-bottom: 1px solid var(--bs-gray-300);
        font-weight: 500;
        color: var(--bs-gray-900);
        text-decoration: none;
        text-align: center;
    }

    FOOTER > A.privacy-policy:hover {
        text-decoration: underline;
    }
}

FOOTER .lower {
    padding-top: 1.5rem;
    display: grid;
    grid-template: "copyright links" min-content
                  / 1fr       1fr;
    gap: 2rem;
}

@media (max-width: 1089px) {
    FOOTER .lower {
        padding-top: 1rem;
        grid-template: "links" 3rem
                       "copyright" min-content
                     / 1fr;
        gap: 2rem;
    }
}

FOOTER .lower .copyright {
    grid-area: copyright;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: -.02em;
    color: #909da2;
}

FOOTER .lower .links {
    grid-area: links;
    justify-self: end;
    display: flex;
    align-items: start;
}

@media (max-width: 1089px) {
    FOOTER .lower .links {
        justify-self: unset;
        justify-content: space-between;
        align-items: center;
    }
}

FOOTER .lower .links A.github-link {
    display: inline-flex;
    align-items: center;
    height: 3rem;
}

@media (max-width: 1089px) {
    FOOTER .lower .links A.github-link {
        display: flex;
    }
}

FOOTER .lower .links A.github-link SPAN {
    margin-inline-start: .75rem;
    padding-inline-end: 1.5rem;
}

FOOTER .lower .links A.github-link:hover SPAN {
    text-decoration: underline;
}

FOOTER .lower .links .google-play {
    display: inline-block;
    border: 1.26px solid var(--bs-gray-300);
    border-radius: .375rem;
    padding: .44rem 1.44rem;
    width: 11rem;
    height: 3rem;
    text-align: center;
}

FOOTER .lower .links .google-play svg {
    width: 7.15rem;
    height: 2.12rem;
}

@media (max-width: 1089px) {
    FOOTER .lower .links .google-play {
        display: block;
    }
}

.grecaptcha-badge {
    visibility: hidden;
}