* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

html,
body {
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    color: white;
    background-color: #191A1D;
}

a {
    color: white;
    text-decoration: none;
}

.container {
    padding: 0 16px;
    width: 100%;
    max-width: 1092px;
}
  
.wrapper {
    min-height: 100%;
}
  
.main-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    /* margin-bottom: 20px; */
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow-x: hidden;
}

.main-wrapper:nth-child(1n+6) {
    margin-bottom: 100px;
}
  
.main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
    align-items: center;
    gap: 50px;
}

.navWrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    height: 78px;

    background: #191A1D;
    backdrop-filter: blur(25px);
  
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    z-index: 10;
}

.nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.navLinks {
    margin-top: -5px;
    margin-right: auto;
    margin-left: 25px;
}
  
.navLinks a {
    margin: 0 0px;
    padding: 10px 10px;
    font-size: 14px;
}

/* .navWrapper .getButton {
    width: 110px;
    height: 33px;
    line-height: 33px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    background-color: #F510E8;
    border-radius: 16.5px;
} */

.round-button {
    padding: 0 23px;
    height: 33px;
    line-height: 33px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    background-color: #F510E8;
    border-radius: 16.5px;
}

.content-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.content-section:first-child {
    max-width: inherit;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-line-pack: justify;
        align-content: space-between;
    gap: 70px;
}

.main-wrapper:nth-child(3n+1) .content-section {
    -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
}

.mainTitle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 70px;
    height: calc(100% - 70px);
    -ms-flex-item-align: flex-start;
    -ms-grid-row-align: flex-start;
    align-self: flex-start;
    flex-grow: 2;
    flex-basis: 0;
}

.mainTitle .round-button {
    width: fit-content;
    margin-bottom: 70px;
}

.mainTitle h1 {
    font-size: 30px;
    font-weight: 600;
    color: #CBEF22;
}

.mainTitle p {
    color: #B9C1E5;
}

.main-wrapper:nth-child(2) .iphoneMainImage {
    height: 500px;
    margin: 0;
    border: 0;
}

.iphoneMainImage {
    position: relative;
    width: 300px;
    height: 350px;
    margin: 70px 0px;
    background: url("img/passvpn-iphone-app.png") no-repeat center;
    background-size: cover !important;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.main-wrapper:nth-child(3) .iphoneMainImage {
    background: url("https://s3-alpha-sig.figma.com/img/7cfa/93d7/928b1fba1e426c69e6ad64f02e6afd6a?Expires=1713744000&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=fcMre0011Zx8ML~6lD1m-nOOOx8r9RNUykqiI0ijSP6odUel8it2OBvjeSI2ivC4u~CwHirs2NcysW8QV4EkdDC~VmJraTpFHOAEzGNZ1XRlCr09G5TQKZHy8Y2Qrm2wv7KYbRLvow1un9XwqyJIbRfnkPfUSQR4PFBAx4pkZSj94MP9XbUgAEQDh1bwooCjrTz6A4M8kv0ZRHAoRzcocuaHTUxuKffKQYIwemRPmIAmjyVXJBdl~Kevi73g0jUG2wD2qDZoOTebu-BJWp0YlqGL0RHS0xpj55bXyETnlFociQ7zBvnO1LgESmo~FxWym747B-aYECrtmFd-C8uPkQ__") no-repeat center;
}

.main-wrapper:nth-child(4) .iphoneMainImage {
    background: url("https://s3-alpha-sig.figma.com/img/bbd8/82a7/334fede4d34f9549f996b82803e7759a?Expires=1713744000&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=kVASt7adWE0AmAKCHEM8PjDg5Ddq~pOgz3qu5mVRMnilJZyP7HyZSKnic7J3JsB6yPzhihy5vn1XfQluUluD2PjR3Yet8sCoB5zHJa1eZ9ElvPMFx3cIpTgB-s20TEE4H-Tn1tC6F8K5zHg9uUDQRWIXSnsqVhfstjjMTFc1FDPj19QtFcR-x4sP0H3Qho~FXilOOc2vdIsh3nAyGKu9MmT0Hb~vcnK0MUMCAKf9bOHRy7Y-YtLE-VivIrVZtM6NcwKDAA0b52CZ492oz0C~H0OI8iB2FZqgdPsW4GyLrTTd~qZ~c6YgDfd2vcNIiTvL9fARE-FFYRphdSDDZdm3DA__") no-repeat center;
}

.main-wrapper:nth-child(5) .iphoneMainImage {
    background: url("https://s3-alpha-sig.figma.com/img/d353/0410/907a6ef0bfa4c7ba5ee503fbff3231e7?Expires=1713744000&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=XMuS14MKcQcrct0LTN6nJK5JvZdxxr-vC4ObRHBamyO~TqmhsTH~KqFOJx~KnJn2uF3w4z17omw1UAgnzo3i94PROz8DgVYXHGqbnuBzwzIJz~I76P-e9IU193MMK8RvTiKo-33Uq0LwcpG~5JlcbxHcqGuVZdnVfrIt2KTatchVTzp8zxjuVE9mIx1vjq76hrAm6-Ra5a4W6-5yZUcwqwq8YwhKQpeuZRbYe5sRtzX-crB~kdDb~bbmini86yY02Y2MTiv3iUHkirN0r3a4SUXvmMh090-DxTCnIo~M3XyCjo4hDucGmtUvBRW-GAMBf15-KVfr8HpeqXPxB2T-8w__") no-repeat center;
}

.downloadAppStore {
    display: block;
    width: 141px;
    height: 42px;
    background: url("img/download-app-store.png") no-repeat center;
    background-size: 100%;
}

.features-block {
    display: flex;
    grid-gap: 16px;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.features-block .item {
    display: flex;
    width: calc(100% / 3 - 11px);
    /* height: 230px; */
    padding: 30px;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background-color: rgba(255, 255, 255, 0.05);
    flex-direction: column;
    align-items: center;
}

.features-block .item .icon {
    width: 84px;
    height: 84px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100%;
}

.features-block .item:nth-child(1) .icon {
    background-image: url("img/vpn-servers-icon.svg");
}

.features-block .item:nth-child(2) .icon {
    background-image: url("img/devices-icon.svg");
}

.features-block .item:nth-child(3) .icon {
    background-image: url("img/fast-streaming-icon.svg");
}

.features-block .item:nth-child(4) .icon {
    background-image: url("img/dns-protection-icon.svg");
}

.features-block .item:nth-child(5) .icon {
    background-image: url("img/encryption-icon.svg");
}

.features-block .item:nth-child(6) .icon {
    background-image: url("img/chat-icon.svg");
}

.features-block .item h3 {
    margin: 20px 0 0;
    font-size: 22px;
    font-weight: 400;
    text-align: center;
}

.servers-params-block {
    display: flex;
    flex-direction: row;
    gap: 100px;
}

.servers-params-block .item {
    display: flex;
    flex-direction: column;
}

.servers-params-block .item span:nth-child(1) {
    font-size: 30px;
    font-weight: 600;
    color: #CBEF22;
}

.servers-params-block .item span:nth-child(2) {
    font-size: 15px;
    font-weight: 400;
    color: #B9C1E5;
}

.servers-map {
    display: block;
    width: 100%;
    height: 400px;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background-image: url("img/servers-map.svg");
    background-repeat: no-repeat;
    background-size: auto 90%;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.05);
}

.reviews-block {
    display: flex;
    grid-gap: 16px;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.reviews-block .item {
    display: flex;
    width: calc(100% / 3 - 11px);
    /* height: 230px; */
    padding: 30px;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background-color: rgba(255, 255, 255, 0.05);
    flex-direction: column;
    align-items: center;
    text-align: left;
}

.reviews-block .item .stars {
    display: block;
    background-image: url("img/star.svg");
    background-position: center;
    background-size: 20%;
    height: 20px;
    width: 120px;
}

.reviews-block .item h5 {
    margin-top: 40px;
    width: 100%;
    font-size: 20px;
    font-weight: 600;
}

.reviews-block .item p {
    margin-bottom: 40px;
    color: #B9C1E5;
}

.reviews-block .item span {
    color: #B9C1E5;
}

.footerWrapper {
    display: flex;
    width: 100%;
    padding: 25px 0;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.footerWrapper p {
    margin: 0;
}

.footerWrapper:nth-child(1) {
    background-color: #24252B;
}

.footerWrapper .container {
    display: flex;
    align-items: center;
}

.footerWrapper:nth-child(1) .container {
    color: #B9C1E5;
    gap: 30px;
}

.footerWrapper:nth-child(2) .container {
    justify-content: space-between;
    color: #B9C1E5;
    font-size: 14px;
}

.footerWrapper:nth-child(2) .container a {
    color: #CBEF22;
}

@media (max-width: 610px) {
    h1, h2, h3, h4, h5, h6 {
        font-weight: 400 !important;
    }

    .navLinks {
        display: none;
    }

    .servers-params-block {
        gap: 30px;
    }

    .features-block .item {
        width: calc(100% / 2 - 8px);
    }

    .reviews-block .item {
        width: 100%;
    }

    .footerWrapper:nth-child(1) p {
        display: none;
    }

    .content-section {
        flex-direction: column !important;
        gap: 0px !important;
    }

    .iphoneMainImage {
        width: 100% !important;
        margin: 0 !important;
    }

    .mainTitle .round-button {
        margin-bottom: 30px !important;
    }

    .main-wrapper:nth-child(5) {
        margin-bottom: 100px;
    }

    .iphoneMainImage {
        height: 400px !important;
        background-size: auto 100% !important;
        background-image: url("img/passvpn-iphone-app-mobile.png");
    }

    .features-block .item .icon {
        width: 60px !important;
        height: 60px !important;
    }

    .features-block .item h3 {
        font-size: 18px;
    }

    .servers-params-block .item span:nth-child(1) {
        font-size: 24px;
    }
}

@media (max-width: 400px) {
    .iphoneMainImage {
        height: 300px !important;
    }
}