html {
    scroll-behavior: smooth;
}

#features,
#pricing,
#faq {
    scroll-margin-top: 84px;
}

/* Header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: #111a17;
    border-bottom: 1px solid #ffffff14
}

.site-header__inner {
    height: 68px
}

.site-header__logo {
    text-decoration: none;
    gap: 10px
}

.site-header__logo__icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, #1fdb95, #0aa06a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.site-header__logo__text-group {
    display: flex;
    align-items: baseline;
    gap: 8px
}

.site-header__logo__text {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #fff
}

.site-header__logo__by {
    font-family: Hind Siliguri, sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .5px;
    color: #1fdb95
}

.site-header__nav {
    gap: 28px
}

.site-header__nav__link {
    font-family: Hind Siliguri, sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #a3b7b0;
    text-decoration: none;
    transition: color .2s ease-in-out
}

.site-header__nav__link:hover {
    color: #fff
}

.site-header__badge-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #384b44;
    background-color: #1c2824;
    font-family: Hind Siliguri, sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #dbe7e3;
    text-decoration: none;
    transition: border-color .2s ease-in-out, color .2s ease-in-out
}

.site-header__badge-link:hover {
    border-color: #1fdb95;
    color: #fff
}

.site-header__cta {
    gap: 12px
}

.site-header__btn-outline,
.site-header__btn-solid {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 9px 22px;
    font-family: Hind Siliguri, sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: transform .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out
}

.site-header__btn-outline {
    background-color: #1c2824;
    border: 1px solid #384b44;
    color: #dbe7e3
}

.site-header__btn-outline:hover {
    background-color: #263530;
    border-color: #4a6058;
    color: #fff
}

.site-header__btn-solid {
    background: linear-gradient(135deg, #1fdb95, #0aa06a);
    color: #fff;
    box-shadow: 0 8px 20px #0aa06a40
}

.site-header__btn-solid:hover {
    transform: translateY(-2px);
    color: #fff
}

@media (max-width: 991.9px) {
    .site-header__nav,
    .site-header__cta {
        display: none
    }
}

/* Footer */

.site-footer {
    position: relative;
    overflow: hidden;
    margin-top: 6rem;
    padding: 64px 0 24px;
    background: radial-gradient(circle at 12% 0%, #168f634d, transparent 42%), linear-gradient(180deg, #0a291e, #03120c);
    color: #cbd6d2
}

.site-footer__top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2rem;
    position: relative;
    z-index: 1
}

@media (max-width: 767.9px) {
    .site-footer__top {
        grid-template-columns: 1fr;
        gap: 2.25rem
    }
}

.site-footer__logo {
    text-decoration: none;
    gap: 10px;
    margin-bottom: 18px
}

.site-footer__logo__icon {
    width: 36px;
    height: 36px
}

.site-footer__logo__text {
    font-family: Montserrat, sans-serif;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: .5px;
    color: #fff
}

.site-footer__address,
.site-footer__email,
.site-footer__helpline {
    font-family: Hind Siliguri, sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    color: #c1d1cb;
    margin-bottom: 10px
}

.site-footer__email a {
    color: #c1d1cb;
    text-decoration: none
}

.site-footer__email a:hover {
    color: #fff
}

.site-footer__top h5 {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: #fff;
    margin-bottom: 20px
}

.site-footer__links ul li {
    margin-bottom: 14px
}

.site-footer__links ul li a {
    font-family: Hind Siliguri, sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #c1d1cb;
    text-decoration: none;
    transition: color .2s ease-in-out
}

.site-footer__links ul li a:hover {
    color: #fff
}

.site-footer__social__icons {
    display: flex;
    gap: 12px;
    margin-bottom: 24px
}

.site-footer__social__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease-in-out
}

.site-footer__social__icon:hover {
    transform: translateY(-2px)
}

.site-footer__social__icon--facebook {
    background-color: #1877f2
}

.site-footer__social__icon--instagram {
    background: radial-gradient(circle at 30% 110%, #fdf497, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%)
}

.site-footer__social__icon--linkedin {
    background-color: #0a66c2
}

.site-footer__social__icon--youtube {
    background-color: #ff0000
}

.site-footer__download-label {
    font-family: Hind Siliguri, sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #c1d1cb;
    margin-bottom: 10px
}

.site-footer__play-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid #465a53;
    background-color: #192621;
    color: #fff;
    text-decoration: none;
    width: max-content
}

.site-footer__play-badge span {
    display: flex;
    flex-direction: column;
    font-family: Hind Siliguri, sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.1
}

.site-footer__play-badge small {
    font-weight: 400;
    font-size: 10px;
    letter-spacing: .5px;
    color: #c1d1cb
}

.site-footer__divider {
    max-width: 1170px;
    margin: 40px auto;
    border: none;
    border-top: 1px solid #ffffff1f;
    position: relative;
    z-index: 1
}

.site-footer__bottom {
    max-width: 1170px;
    margin: 32px auto 0;
    gap: 8px;
    font-family: Hind Siliguri, sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #92aaa1;
    position: relative;
    z-index: 1
}

@media (max-width: 575.9px) {
    .site-footer__bottom {
        justify-content: center !important;
        text-align: center
    }
}