@import "sections/hero.css";
@import "sections/reviewers.css";
@import "sections/zigzag.css";
@import "sections/benefits.css";
@import "sections/accordion-image.css";
@import "sections/customer-reviews.css";
@import "sections/faqs.css";
@import "sections/prefooter.css";

.h1, h1 {
    font-size: 3rem;
}

.h2, h2 {
    font-size: 3.5rem;
}

.usenet-newsreader-page--content a:not(.cta-btn):not(.download-btn) {
    text-decoration: underline;
}

.usenet-newsreader-page--content a:not(.cta-btn):not(.download-btn):hover {
    text-decoration: none;
}

.cta-btn {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 120%;
}

@media screen and (max-width: 1199px) {
    h1, .h1 {
        font-size: 3rem;
    }

    h2, .h2 {
        font-size: 3rem;
    }
}

@media screen and (max-width: 991px) {
    .cta-btn {
        width: 100%;
        text-align: center;
        border-radius: 1rem;
        padding: 1rem;
    }
}

@media screen and (max-width: 575px) {
    h1, .h1 {
        font-size: 2.5rem;
    }

    h2, .h2 {
        font-size: 2.5rem;
    }

    h2, .h2 {
        font-size: 2.5rem;
    }

    .row > * {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .cta-btn {
        border-radius: 1.25rem;
        width: 100%;
    }
}

/* Hero Section*/
.hero {
    border-radius: 2.5rem;
    background-image: url("/images/redesign/vpn/hero-bg.jpg");
    margin-bottom: 0;
    padding: 4rem 0;
}

.hero .hero-foreground {
    object-position: 80%;
}

.hero .cta-btn {
    padding: 1rem 3rem;
    border-radius: 1.25rem;
}
.hero h1, .hero h5 {
    padding-right: 2rem;
}
.hero .col-6 > p {
    padding-right: 6rem;
}

.hero-devices svg {
    height: 1.5rem;
}

.hero .cta-btn.transparent-cta {
    padding: 1rem 2rem;
    background-color: transparent;
    border: 1px solid #FFF;
}

@media screen and (max-width: 1399px) {
    .hero .cta-btn {
        padding: 1rem 5rem;
    }
    .hero h1, .hero h5 {
        padding-right: 5rem;
    }
}

@media screen and (max-width: 1199px) {
    .hero .cta-btn {
        padding: 1rem 2rem;
    }
    .hero h1, .hero h5 {
        padding-right: 2.5rem;
    }
}

@media screen and (max-width: 991px) {
    .hero {
        padding-bottom: 0;
        padding-top: 3rem;
    }

    .hero .hero-foreground {
        margin-top: 2rem;
    }
    .hero h1, .hero h5 {
        padding-right: 0;
    }

    .hero .cta-btn {
        padding: 1rem;
        font-size: 1.25rem;
    }

    .hero--subtext {
        text-align: center;
        width: 80%;
        margin: 1.5rem auto 0 auto;
    }

    .hero .col-6 > p {
        padding: 0;
        text-align: center;
    }
}

/* Hero Section*/
/* Reviewers Section*/
.reviewers {
    padding: 4.75rem 0 2rem 0;
    margin-top: -2.75rem;
    position: relative;
    background: #FAFAFA;
}
@media screen and (max-width: 991px) {
    .reviewers {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding: 4rem 0 1.5rem 0;
    }
    .reviewers--list svg {
        max-width: 15rem;
        max-height: 5rem;
        width: auto;
        height: auto;
        margin: .75rem;
    }
    .reviewers h3 {
        width: 100%;
        text-align: center;
        justify-content: center;
        margin: 0;
    }
}
/* Reviewers Section*/

/* download-newsreader Section*/
.download-newsreader {
    padding: 4.75rem 0 2rem 0;
    margin-top: -2.75rem;
    background: #EBEBEB;
    border-radius: 0 0 2.5rem 2.5rem;
}
.download-newsreader .download-btn {
    border-radius: 2rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 140%;
    text-decoration: none;
    color: var(--black-text);
    transition: .1s;
    border: 1px solid transparent;
}
.download-newsreader .download-btn svg {
    width: 2rem;
    height: 2rem;
    margin-bottom: .5rem;
}
.download-newsreader .download-btn svg path {
    fill: var(--black-text);
}
.download-newsreader .download-btn:hover {
    background: #EBEBEB;
    transition: .1s;
    border-color: var(--black-text);
}
@media screen and (max-width: 1399px) {
    .download-newsreader h5 {
        font-size: 1.25rem;
    }
}
@media screen and (max-width: 1199px) {
    .download-newsreader h5 {
        font-size: 1.5rem;
    }
}
@media screen and (max-width: 991px) {
    .download-newsreader h5 {
        font-size: 1.125rem;
    }
}
/* download-newsreader Section*/

/* usenet-intro section */
.usenet-intro {
    padding: 3.75rem 1.5rem;
    background: #fff;
}

.usenet-intro h2 {
    margin-bottom: 1.5rem;
}

.usenet-intro p {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 140%;
    margin-bottom: 1.5rem;
}

.usenet-intro p:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 991px) {
    .usenet-intro {
        padding: 3rem 0;
        width: 100%;
    }

    .usenet-intro h2 {
        margin-bottom: 2rem;
    }

    .usenet-intro p {
        font-size: 1.125rem;
        font-weight: 400;
        line-height: 155%;
    }
}

/* usenet-intro section */

/* Zigzag Section*/
.nh-features .zigzag {
    background: #EBEBEB;
}
.nh-features .zigzag h2 {
    width: 100%;
}

.zigzag--item p, .zigzag--item li {
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 155%;
}

.zigzag--item p:last-child {
    margin-bottom: 0;
}

.zigzag--item ol, .zigzag--item ul {
    counter-reset: section;
    padding: 0;
    margin: 0;
}

.zigzag--item ul li {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: flex-start;
    margin-bottom: 1rem;
    list-style: none;
}

.zigzag--item svg {
    width: 2rem;
    height: 2rem;
    margin-right: .5rem;
}

.zigzag--item svg path {
    fill: var(--black-text);
}

.zigzag--item ul li p {
    display: inline;
    width: calc(100% - 2.5rem);
}

.zigzag--item ul li:last-child {
    margin-bottom: 0;
}

.zigzag--item ul {
    margin-bottom: 1.5rem;
}

.nh-features .zigzag--item:nth-child(odd) .zigzag--item_text {
    order: 2;
    padding-left: 2.5rem;
    padding-right: 0;
}
.nh-features .zigzag--item:nth-child(odd) .zigzag--item_img {
    order: 1;
    padding-right: 2.5rem;
    padding-left: 0;
}


@media screen and (max-width: 1399px) {
    .zigzag--item ul li {
        flex-wrap: nowrap;
    }
}

@media screen and (max-width: 991px) {
    .zigzag {
        padding: 3rem 0;
    }

    .zigzag--items {
        margin: 0;
    }

    .zigzag--item li {
        text-align: left;
        align-items: flex-start;
    }

    .nh-features .zigzag--item:nth-child(n) .zigzag--item_img,
    .nh-features .zigzag--item:nth-child(n) .zigzag--item_text {
        padding: 0;
        margin: 1.75rem 0;
    }
    .zigzag--cta {
        margin-top: 1.5rem;
    }
}

/* Zigzag Section*/

/* BENEFITS Section*/
.benefits-list.bg-gray {
    background: #F7F6F5;
}

.benefits--item {
    width: calc(33.333% - 2rem);
    background: #fff;
    flex-direction: column;
}

.benefits--item_icon {
    margin: 0;
    padding: 1.25rem;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
}
.benefits--item_icon svg {
    width: 2rem;
    height: 2rem;
}
.benefits--cta .cta-btn {
    border-radius: 1rem;
    font-size: 1rem;
    font-weight: 600;
}

@media screen and (max-width: 991px) {
    .benefits {
        border-radius: 0;
    }
    .benefits h2 {
        width: 100%;
    }
    .benefits h4 {
        width: 100%;
    }
    .benefits h4 p {
        font-size: 1.125rem;
        line-height: 155%;
        margin: 0;
    }
    .benefits--item {
        width: 100%;
        margin: .75rem 0;
        padding: 2rem;
    }
    .benefits--item_icon {
        display: initial;
        padding: 1.125rem;
        border-radius: 1rem;
    }
    .benefits--item_desc-mb {
        display: none;
    }
    .benefits--item_desc {
        overflow: auto;
        max-height: initial;
    }
    .benefits--item:after {
        content: none;
    }
    .benefits--item_text h5 {
        width: 100%;
    }
    .benefits--item_icon svg {
        width: 2rem;
        height: 2rem;
    }
    .benefits--cta {
        margin-top: 0;
    }
    .benefits--cta .cta-btn {
        border-radius: 1.25rem;
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 120%;
    }
}
/* BENEFITS Section*/

/* search-notes Section */
.search-notes .zigzag {
    padding: 1rem 0 5rem 0;
}
.search-notes .zigzag--item ul {
    padding-left: 1.5rem;
}
.search-notes .zigzag--item ul li {
    list-style: disc outside;
    display: list-item;
}
.search-notes .zigzag--item h3 {
    font-size: 3rem;
}
.search-notes .zigzag--item p, .search-notes .zigzag--item li {
    font-size: 1rem;
}
@media screen and (max-width: 991px) {
    .search-notes .zigzag {
        padding: 3rem 0;
    }
}
/* search-notes Section */

/* learn-usenet Section */
.learn-usenet {
    background: #FAFAFA;
    padding: 3.75rem 0;
}
.original-social-section--item {
    height: 100%;
    border-radius: 2.5rem;
    background-color: #fff;
}
.original-social-section--item-content {
    padding: 2.5rem;
}
.original-social-section--alt-img {
    display: block;
    border-radius: 2.5rem 2.5rem 0 0;
}
.original-social-section--item-content p:last-child {
    margin-bottom: 0;
}
@media screen and (max-width: 991px) {
    .original-social-section--item-content {
        padding: 1.5rem;
    }
}

.original-social-section--item-content .headline-4 {
    margin-bottom: 1rem;
    text-align: center;
    font-size: 2rem;
}
.search-tools {
    padding: 2.5rem;
    border-radius: 2.5rem;
    background: radial-gradient(circle at top left, rgba(0, 128, 128, 0.5), transparent 60%),
    radial-gradient(circle at bottom right, rgba(0, 128, 128, 0.5), transparent 60%), #0A223B; /* Dark navy base color */
    color: #fff;
}
.usenet-clients {
    padding: 2.5rem;
    background: #FAFAFA;
    border-radius: 2.5rem;
    color: var(--black-text);
}
.usenet-clients h3 {
    font-size: 2.5rem;
}
.usenet-clients--item {
    border-radius: 2.5rem;
    border: 2px solid #ebebeb;
    background: #fff;
    padding: 2.5rem;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
.usenet-clients--item img {
    width: 4rem;
    height: 4rem;
}
.usenet-clients--item_cta {
    margin-top: 2rem;
    display: flex;
    align-items: flex-end;
    width: 100%;
}
.usenet-clients--item_cta .cta-btn {
    border-radius: 1.25rem;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
}
.usenet-indexers {
    border-radius: 2.5rem;
    border: 2px solid #ebebeb;
    background: #fff;
    padding: 2.5rem;
}
.usenet-indexers h4 {
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 120%;
}
@media screen and (max-width: 991px) {
    .search-tools {
        padding-left: .5rem;
        padding-right: .5rem;
    }
    .usenet-clients {
        padding: 1.5rem .5rem;
    }
    .usenet-clients--item {
        padding: 1.5rem;
    }
    .usenet-indexers {
        padding: 1.5rem .5rem;
    }
    .usenet-indexers h4 {
        font-size: 1.75rem;
    }
    .usenet-indexers * {
        text-align: center;
    }
}
/* learn-usenet Section */

/* nh-newsreader-features Section */
.nh-newsreader-features {
    padding: 7.5rem 0;
    border-radius: 2.5rem;
    background: url(/images/redesign/home/wiu-bg.jpg) no-repeat;
    background-size: cover;
}
.nh-newsreader-features--wrapper {
    border-radius: 2.5rem;
    background: #EBEBEB;
    padding: 5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}
.nh-newsreader-img {
    background: #fff;
    border-radius: 2.5rem;
    padding: 3rem;
    height: 100%;
    display: flex;
    align-items: center;
}
.nh-newsreader-img img {
    width: 100%;
    border-radius: 0.4255rem;
    box-shadow: 0 9.077px 27.23px 3.404px rgba(0, 0, 0, 0.12);
}
.nh-newsreader-features--list {
    margin-top: 1.5rem;
}
.nh-newsreader-features--item {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: flex-start;
    margin: .75rem 0;
}
.nh-newsreader-features--icon {
    border-radius: 0.5rem;
    background: #0A223B;
    padding: .75rem;
    margin-right: 1rem;
}
.nh-newsreader-features--icon svg {
    width: 1.5rem;
    height: 1.5rem;
}
.nh-newsreader-features--icon svg path {
    fill: #fff;
}
.nh-newsreader-features--text {
    width: calc(100% - 4rem);
}
.nh-newsreader-features--text h5 {
    margin-bottom: .125rem;
}
@media (max-width: 991px) {
    .nh-newsreader-features {
        padding: 3rem .5rem;
    }
    .nh-newsreader-features--wrapper {
        padding: 3rem 1rem;
    }
    .nh-newsreader-features--cta {
        width: 100%;
    }
}
/* nh-newsreader-features Section */

/* usenet-search-tips Section */
.usenet-search-tips {
    padding: 3.75rem 0;
}
.usenet-search-tips h2 {
    margin-bottom: 2rem;
}
.usenet-search-tips ol {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
}
.usenet-search-tips li {
    display: flex;
    align-items: flex-start;
    width: 100%;
    flex-direction: row;
    margin: 1.75rem 0;
    flex-wrap: wrap;
}
.usenet-search-tips li:last-child {
    margin-bottom: 0;
}
.usenet-search-tips ol .counter {
    border-radius: .5rem;
    background: var(--black-text);
    padding: .75rem;
    margin-right: 1.5rem;
    color: #fff;
    text-align: center;
    width: 3rem;
    height: 3rem;
    line-height: 1.5;
    font-size: 1.125rem;
}
.usenet-search-tips--text {
    width: calc(100% - 4.5rem);
}
.usenet-search-tips--text p {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 155%;
}
@media (max-width: 991px) {
    .usenet-search-tips ol {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
/* usenet-search-tips Section */

/* img-accordion Section */
.img-accordion {
    background: #F7F6F5;
}
.img-accordion h2 {
    margin-bottom: 1.5rem;
}

.accordion-wrapper {
    margin: 3rem 0 0;
}

.accordion-items {
    padding-right: 3rem;
}

.accordion-content .accordion-item {
    background: #fff;
    border-radius: 2rem;
}

.accordion-content .accordion-button {
    font-size: 1.5rem;
    line-height: 120%;
    padding: 1.5rem;
}
.accordion-content .accordion-button.collapsed {
    opacity: 1;
}
.accordion-content .accordion-button:before, .accordion-content .accordion-collapse:before {
    content: none;
}
.accordion-content .accordion-button span {
    border-radius: .5rem;
    background: var(--black-text);
    padding: .5rem 1rem;
    margin-right: 1rem;
    color: #fff;
    text-align: center;
    line-height: 1.5;
    font-size: 1.125rem;
}
.accordion-content {
    align-items: flex-start;
}
.accordion-content .accordion-body {
    padding: 0 1.5rem 1.5rem 1.5rem;
}
.accordion-flush>.accordion-item:last-child {
    margin-bottom: 0;
}

.accordion-imgs.ltr {
    border-radius: 2.5rem;
    background: #FFF;
    padding: 0;
}

.accordion-imgs img {
    height: auto;
    border-radius: 0.625rem;
}

.img-accordion .accordion-content .accordion-button::after {
    content: '';
    transform: rotate(90deg);
    width: 1.75rem;
    height: 1.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cg clip-path='url(%23clip0_1666_2470)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 -1.39876e-06C29.176 -2.46882e-07 32 2.824 32 16C32 29.176 29.176 32 16 32C2.824 32 2.46882e-07 29.176 1.39876e-06 16C2.55065e-06 2.824 2.824 -2.55065e-06 16 -1.39876e-06ZM14.2761 22.2761L19.6095 16.9428C20.1302 16.4221 20.1302 15.5779 19.6095 15.0572L14.2761 9.72386C13.7555 9.2032 12.9112 9.2032 12.3905 9.72386C11.8699 10.2445 11.8699 11.0888 12.3905 11.6095L16.7811 16L12.3905 20.3905C11.8699 20.9112 11.8699 21.7554 12.3905 22.2761C12.9112 22.7968 13.7555 22.7968 14.2761 22.2761Z' fill='%230A223B'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1666_2470'%3E%3Crect width='32' height='32' fill='white' transform='translate(32 32) rotate(-180)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-size: contain;
    transition: all .2s;
}
.img-accordion .accordion-content .accordion-button:not(.collapsed)::after {
    transform: rotate(-90deg);
    transition: all .2s;
}

@media screen and (max-width: 1399px) {
    .img-accordion {
        padding: 2rem 1rem;
    }
    .accordion-content .accordion-button {
        font-size: 1.75rem;
    }
}

@media screen and (max-width: 1199px) {
    .img-accordion p {
        font-size: 1.25rem;
    }
    .accordion-content .accordion-button {
        font-size: 1.25rem;
    }
}

@media screen and (max-width: 991px) {
    .img-accordion {
        padding: 2rem 0;
    }

    .accordion-items {
        padding: 0
    }

    .accordion-content .accordion-body {
        display: flex;
        flex-wrap: wrap;
    }
    
    .accordion-imgs {
        display: none;
    }

    .img-accordion p {
        font-size: 1.125rem;
    }
    .accordion-content .accordion-button {
        flex-direction: column;
        align-items: flex-start;
    }
    .accordion-content .accordion-button span {
        margin: 0 0 1rem 0;
    }
    .img-accordion .accordion-content .accordion-button::after {
        position: absolute;
        right: 1rem;
        top: 2rem;
    }
}

@media screen and (max-width: 767px) {
    .img-accordion p {
        font-size: 1.125rem;
    }

}

@media screen and (max-width: 575px) {
    .accordion-wrapper {
        margin: 0 auto 2rem;
        width: 100%;
    }
    .img-accordion p {
        font-size: 1.125rem;
    }
}
/* img-accordion Section */

/* customer-reviews Section */
.customer-reviews {
    border-radius: 0;
}
/* customer-reviews Section */

/* faqs section */
.faqs-section {
    background: #fff;
}
.faqs-section .accordion-item {
    border: none;
    padding-bottom: 2rem;
    background: #F7F6F5;
}
@media (max-width: 991px) {
    .faqs-section .accordion-button:not(.collapsed)::after {
        margin-top: -.25rem;
    }
}
/* faqs section */

/* Prefooter Section*/
.prefooter {
    background: #E9E9E9;
}

.prefooter h2 {
    font-size: 2.5rem;
}

.prefooter a:not(.cta-btn) {
    text-decoration: none;
}

.prefooter a:not(.cta-btn):hover {
    text-decoration: underline;
}

.prefooter p {
    font-size: 1rem;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 1rem;
}

.prefooter .cta-btn {
    padding: 1rem 2.5rem;
    font-size: 1rem;
    line-height: 100%;
    margin-top: 2rem;
}

.prefooter img {
    left: auto;
    right: 0;
    object-position: right;
    border-radius: 2.5rem 0 0 2.5rem;
}
.prefooter ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.prefooter ul li {
    margin: .25rem 0;
    font-weight: 700;
}

@media screen and (max-width: 1399px) {
    .prefooter h2 {
        font-size: 2.75rem;
    }
}

@media screen and (max-width: 1199px) {
    .prefooter h2 {
        font-size: 2.5rem;
    }
}

@media screen and (max-width: 991px) {
    .prefooter {
        padding: 1rem 0 3rem;
    }

    .prefooter img {
        border-radius: 0;
    }

    .prefooter p {
        font-size: 1rem;
        margin: 1.5rem 0 2.5rem 0;
    }

    .prefooter .cta-btn {
        padding: 1rem;
        width: 100%;
        font-size: 1.25rem;
        font-weight: 700;
    }
}

/* Prefooter Section*/