#sp-main-body{
    position: relative;
    z-index: 0;
}
#sp-main-body:before,
#sp-main-body:after{
    content: "";
    position: fixed;
    z-index: 1;
    width: 50%;
    height: 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    background-size: cover;
    opacity: .8;
}
#sp-main-body:before{
    background-image: url("../images/general/light-bg-left.svg");
    background-position: bottom right;
    top: 0;
    left: -10%;
}
#sp-main-body:after{
    background-image: url("../images/general/light-bg-right.svg");
    background-position: top left;
    bottom: 0;
    right: -10%;
}
@media (max-width: 1199px) {
    #sp-main-body:before{
        top: -30%;
        left: 0;
    }
    #sp-main-body:after{
        bottom: -30%;
        right: 0;
    }
}
/*-------------- Pricing page --------------*/
/*-------------- VpnHood! Connect page --------------*/
#screenshotSlider .item {
    flex-shrink: 0;
    text-align: center;
    white-space: nowrap;
}
#downloadIconsWrapper>div{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: white;
    min-width: 200px;
    min-height: 200px;
    background: url("../images/general/purple-hexagon.svg") no-repeat center center;
    background-size: contain;
}
@media (max-width: 767px)  and (min-width: 366px){
    #downloadIconsWrapper>div:first-child{
        margin-bottom: -24px;
    }
}
@media (max-width: 575px) {
    #downloadIconsWrapper>div{
        min-width: 175px;
        min-height: 175px;
    }
}
#downloadIconsWrapper>div:before{
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(20px);
    top: 100px;
    width: 100%;
    max-width: 200px;
    height: 25%;
    box-shadow: inset 10px 10px 84px -7px rgba(var(--purple-300-rgb), .3);
}
#appWrapper{
    position: relative;
    background: url("../images/vpnhood-connect/download-pending-bg.webp") no-repeat center center;
    height: 709px;
}
#rotateCircleWrapper{
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 1px solid var(--purple-300);
    top: 145px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#rotateCircle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: rotate 3s linear infinite;
}
#rotateCircle:before, #rotateCircle:after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--purple-300);
}
#rotateCircle:before {
    bottom: 13%;
    left: 7%;
}
#rotateCircle:after {
    top: 13%;
    right: 7%;
}
#downloadBtnWrapper{
    position: absolute;
    top: 330px;
    left: 0;
    right: 0;
    text-align: center;
}
#rocketWrapper{
    position: relative;
    background: url("../images/general/purple-hole.webp") no-repeat center bottom;
    background-size: 100%;
    height: 470px;
    max-width: 800px;
    margin: 0 auto;
}
#rocketWrapper:after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    background: url("../images/general/purple-hole-overlap.webp") no-repeat center bottom;
    background-size: 100%;
}
#rocket{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 165px;
}
#rocketWrapper .star-effect{
    max-width: 600px;
    margin: 0 auto;
    left: 0;
    right: 0;
}
#guaranteeCircle{
    width: 138px;
    height: 138px;
    background: url("../images/general/purple-grad-circle.webp") no-repeat center center;
}
#goPremium #featuresTextWriter{
    max-width: 500px;
    z-index: 1;
    position: relative;
}
@media (max-width: 991px) {
    #appWrapper{
        background-size: contain;
        height: 523px;
    }
    #rotateCircleWrapper{
        top: 86px;
    }
    #downloadBtnWrapper{
        top: 266px;
    }
    #rocketWrapper,#rocketWrapper:after{
        background-size: contain;
    }
    #rocketWrapper{
        height: 500px;
    }
    #rocket {
        bottom: 175px;
        width: 100px;
    }
}
@media (max-width: 767px) {
    #appWrapper{
        background-size: 575px;
        height: 425px;
    }
    #rotateCircleWrapper{
        width: 130px;
        height: 130px;
        top: 59px;
    }
    #downloadBtnWrapper{
        top: 213px;
    }
    #downloadBtnWrapper>a{
        padding: 8px 15px;
    }
    #rocket {
        bottom: 29%;
        width: 15%;
    }
    #rocketWrapper {
        height: 380px;
    }
}
@media (max-width: 575px) {
    .multiTextWriter{
        font-size: 13px;
    }
}
@media (max-width: 425px) {
    #rocketWrapper {
        height: 312px;
    }
    #featuresTextWriter>svg{
        width: 25px;
        height: 25px;
    }
}
@media (max-width: 375px) {
    #rocketWrapper {
        height: 275px;
    }
}
/*-------------- VpnHood! Connect free vs premium page --------------*/
#appMockupWrapper{
    position: relative;
    width: 800px;
    height: 800px;
    margin: 65px auto;
}
#appMockupWrapper .circle-wrapper{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 50%;
    border: 1px solid rgba(var(--purple-300-rgb), var(--vh-circle-border-opacity));
    animation: rotate 25s linear infinite;
}
#appMockupWrapper .circle-wrapper.circle-1{
    width: 47%;
    height: 47%;
    --vh-circle-border-opacity: .5;
    --vh-shadow-blur: 145px;
    --vh-shadow-spread: 150px;
    background-color: rgba(var(--purple-400-rgb), .5);
    box-shadow: 0 0 var(--vh-shadow-blur) var(--vh-shadow-spread) rgba(var(--purple-400-rgb), .4);
}
#appMockupWrapper .circle-wrapper.circle-2{
    width: 56%;
    height: 56%;
    --vh-circle-border-opacity: .4;
    animation-duration: 30s;
}
#appMockupWrapper .circle-wrapper.circle-3{
    width: 66%;
    height: 66%;
    --vh-circle-border-opacity: .35;
    animation-duration: 27s;
}
#appMockupWrapper .circle-wrapper.circle-4{
    width: 78%;
    height: 78%;
    --vh-circle-border-opacity: .3;
    animation-duration: 32s;
}
#appMockupWrapper .circle-wrapper.circle-5{
    width: 89%;
    height: 89%;
    --vh-circle-border-opacity: .2;
    animation-duration: 30s;
}
#appMockupWrapper .circle-wrapper.circle-6{
    width: 100%;
    height: 100%;
    --vh-circle-border-opacity: .18;
    animation-duration: 35s;
}
#appMockupWrapper .blob-wrapper{
    position: relative;
    width: 100%;
    height: 100%;
}
#appMockupWrapper .blob-wrapper:before,
#appMockupWrapper .blob-wrapper:after{
    content: "";
    position: absolute;
    z-index: 1;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: rgb(var(--vh-blob-bg-color));
    --vh-blob-shadow: 6px;
    box-shadow: 0 0 0 var(--vh-blob-shadow) rgba(var(--vh-blob-bg-color), .3);
}
#appMockupWrapper .circle-1>.blob-wrapper:before{
    top: -2%;
    left: 49%;
    --vh-blob-bg-color: var(--purple-300-rgb);
}
#appMockupWrapper .circle-1>.blob-wrapper:after{
    bottom: -2%;
    left: 49%;
    --vh-blob-bg-color: var(--green-100-rgb);
}
#appMockupWrapper .circle-2>.blob-wrapper:before{
    top: 30%;
    left: 95%;
    --vh-blob-bg-color: var(--green-100-rgb);
}
#appMockupWrapper .circle-2>.blob-wrapper:after{
    bottom: 40%;
    left: -1%;
    --vh-blob-bg-color: var(--purple-300-rgb);
}
#appMockupWrapper .circle-3>.blob-wrapper:before{
    top: 18%;
    left: 9%;
    --vh-blob-bg-color: var(--green-100-rgb);
}
#appMockupWrapper .circle-3>.blob-wrapper:after{
    bottom: 17%;
    left: 88%;
    --vh-blob-bg-color: var(--purple-300-rgb);
}
#appMockupWrapper .circle-4>.blob-wrapper:before{
    top: 3%;
    left: 29%;
    --vh-blob-bg-color: var(--purple-300-rgb);
}
#appMockupWrapper .circle-4>.blob-wrapper:after{
    bottom: -3%;
    left: 73%;
    --vh-blob-bg-color: var(--green-100-rgb);
}
#appMockupWrapper .circle-5>.blob-wrapper:before{
    top: 11%;
    left: 71%;
    --vh-blob-bg-color: var(--purple-300-rgb);
}
#appMockupWrapper .circle-5>.blob-wrapper:after{
    bottom: 11%;
    left: 16%;
    --vh-blob-bg-color: var(--green-100-rgb);
}
#appMockupWrapper .circle-6>.blob-wrapper:before{
    top: 45%;
    left: -1%;
    --vh-blob-bg-color: var(--green-100-rgb);
}
#appMockupWrapper .circle-6>.blob-wrapper:after{
    bottom: 45%;
    left: 99%;
    --vh-blob-bg-color: var(--purple-300-rgb);
}
#compareTable{
    margin-top: 80px;
}
#compareTable .featureColumn,
#compareTable .freeColumn{
    border-right: 1px rgba(var(--purple-400-rgb), 1) solid;
}
.yes{
    display: inline-block;
    width: 34px;
    height: 34px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m8.5 12.5l2 2l5-5'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
.no{
    display: inline-block;
    width: 34px;
    height: 34px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath stroke-linecap='round' d='m14.5 9.5l-5 5m0-5l5 5'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    background-color: currentColor;
}
.freeColumn .yes{
    background-color: var(--purple-300);
}
.premiumColumn .yes{
    background-color: var(--green-100);
}
.features-row>div{
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px rgba(var(--purple-400-rgb), 1) solid;
}
.features-row>.freeColumn,
.features-row>.premiumColumn{
    justify-content: center;
}
.features-row>.featureColumn{
    color: white;
}
@media (max-width: 1199px) {
    #appMockupWrapper{
        width: 600px;
        height: 600px;
    }
    #appMockupWrapper img{
        width: 60%;
    }
    #appMockupWrapper .blob-wrapper:before,
    #appMockupWrapper .blob-wrapper:after{
        width: 10px;
        height: 10px;
    }
    #compareTable{
        margin-top: 50px;
    }
    #appMockupWrapper .circle-wrapper.circle-1{
        --vh-shadow-spread: 105px;
    }
}
@media (max-width: 991px) {
    #appMockupWrapper{
        width: 400px;
        height: 400px;
    }
    #appMockupWrapper .blob-wrapper:before,
    #appMockupWrapper .blob-wrapper:after{
        width: 8px;
        height: 8px;
        --vh-blob-shadow: 4px;
    }
}
@media (max-width: 767px) {
    #compareTable #header>.freeColumn>h2,
    #compareTable #header>.premiumColumn>h2{
        writing-mode: vertical-lr;
        text-orientation: mixed;
    }
}
@media (max-width: 424px) {
    #appMockupWrapper {
        width: 300px;
        height: 300px;
    }
    #appMockupWrapper .blob-wrapper:before,
    #appMockupWrapper .blob-wrapper:after {
        width: 6px;
        height: 6px;
        --vh-blob-shadow: 3px;
    }
}
/*-------------- Pricing page --------------*/
.plan-features-list>li{
    display: flex;
    align-items: center;
    gap: 8px;
}
.plan-features-list>li:not(:last-child){
    margin-bottom: 8px;
}
.plan-check-icon{
    display: inline-block;
    width: 25px;
    height: 25px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M9.781 3.89c.564-.48.846-.72 1.14-.861a2.5 2.5 0 0 1 2.157 0c.295.14.577.38 1.14.861c.225.192.337.287.457.367a2.5 2.5 0 0 0 .908.376c.141.028.288.04.582.064c.739.058 1.108.088 1.416.197a2.5 2.5 0 0 1 1.525 1.524c.109.309.138.678.197 1.416c.023.294.035.441.063.583c.064.324.192.633.376.907c.08.12.176.232.367.457c.48.564.721.846.862 1.14a2.5 2.5 0 0 1 0 2.157c-.14.294-.381.576-.862 1.14a5 5 0 0 0-.367.457a2.5 2.5 0 0 0-.376.907c-.028.142-.04.289-.063.583c-.059.738-.088 1.108-.197 1.416a2.5 2.5 0 0 1-1.525 1.524c-.308.11-.677.139-1.416.197c-.294.024-.44.036-.582.064a2.5 2.5 0 0 0-.908.376a5 5 0 0 0-.456.367c-.564.48-.846.72-1.14.861a2.5 2.5 0 0 1-2.157 0c-.295-.14-.577-.38-1.14-.861a5 5 0 0 0-.457-.367a2.5 2.5 0 0 0-.908-.376a5 5 0 0 0-.582-.064c-.739-.058-1.108-.088-1.416-.197a2.5 2.5 0 0 1-1.525-1.524c-.109-.308-.138-.678-.197-1.416a5 5 0 0 0-.063-.583a2.5 2.5 0 0 0-.376-.907c-.08-.12-.176-.232-.367-.457c-.48-.564-.721-.846-.862-1.14a2.5 2.5 0 0 1 0-2.157c.141-.294.381-.576.862-1.14c.191-.225.287-.337.367-.457a2.5 2.5 0 0 0 .376-.907c.028-.142.04-.289.063-.583c.059-.738.088-1.107.197-1.416A2.5 2.5 0 0 1 6.42 4.894c.308-.109.677-.139 1.416-.197c.294-.024.44-.036.582-.064a2.5 2.5 0 0 0 .908-.376c.12-.08.232-.175.456-.367Z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m8.5 12.5l2 2l5-5'/%3E%3C/g%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}
@media (min-width: 992px){
    #pricingTable #plan1 .price-desc{
        min-height: 99px;
    }
}
@media (max-width: 1199px) and (min-width: 992px){
    #pricingTable #plan1 .plan-title{
        padding-bottom: 32px;
    }
}
/*-------------- Download CONNECT page & Download CLIENT page --------------*/
#downloadConnectBanner, #downloadClientBanner{
    padding-bottom: 200px;
    margin-bottom: -140px;
}
#downloadConnectBanner img{
    border-radius: 30%;
    box-shadow: 1px 8px 49px 12px rgb(var(--purple-300-rgb), 28%);
}
#downloadClientBanner img{
    border-radius: 30%;
    box-shadow: 1px 8px 49px 12px rgb(var(--blue-100-rgb), 28%);
}
#downloadTable .title-and-icon{
    transition: color .4s ease;
}
#downloadTable .vh-card-dark:hover .title-and-icon{
    color: white;
}
@media (max-width: 1399px) and (min-width: 1200px) {
    #downloadTable .vh-btn-primary,
    #downloadTable .vh-btn-secondary{
        padding-left: 15px;
        padding-right: 15px;
    }
}
/*-------------- Features list page --------------*/
#featuresDescription .row + .row{
    margin-top: 75px;
    padding-top: 75px;
    border-top: 1px solid rgba(var(--purple-200-rgb), 0.25);
}
#featuresDescription .row:nth-child(even) img{
    margin-left: auto;
}
@media (max-width: 991px) {
    #featuresDescription .row + .row{
        margin-top: 50px;
    }
    #featuresDescription .row img{
        margin: 0 auto 20px;
    }
}
/*-------------- Contact page --------------*/
#appNameAnim{
    z-index: 1;
}
.contact-info-container{
    background: url('../images/general/dot-country.png') no-repeat center center;
    background-size: contain;
    padding: 175px 0;
    z-index: 0;
    color: white;
}
.vh-circle-animation {
    height: 450px;
    width: 450px;
    z-index: -2;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.vh-circle-animation:before,
.vh-circle-animation:after {
    position: absolute;
    content: '';
    border: 2px solid rgba(var(--purple-200-rgb), 0.48);
    border-radius: 50%;
}
.vh-circle-animation:before {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    animation: rotatecw 30s linear infinite 0s;
}
.vh-circle-animation:after {
    top: 35px;
    left: 35px;
    bottom: 35px;
    right: 35px;
    animation: rotateacw 24s linear infinite 0s;
}
.vh-circle-animation:before, .vh-circle-animation:after {
    border-top-color: var(--purple-300);
    border-right-color: var(--purple-300);
}

@keyframes rotatecw {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes rotateacw {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}
@media (max-width: 450px) {
    .contact-info-container{padding: 90px 0;}
    .vh-circle-animation {
        height: 350px;
        width: 350px;
    }
}
@media (max-width: 380px) {
    .contact-info-container{padding: 52px 0;}
    .vh-circle-animation:before,
    .vh-circle-animation:after{
        border-width: 1px;
    }
    .vh-circle-animation {
        height: 280px;
        width: 280px;
    }
}
.contact-icon{
    height: 38px;
    width: 38px;
}
.contact-text a:not(:hover),
.dj-simple-contact-form.style-4 .inputbox,
.dj-simple-contact-form.style-4 textarea{
    color: var(--blue-lighten-1);
}
.dj-simple-contact-form.style-4 .inputbox::placeholder,
.dj-simple-contact-form.style-4 textarea::placeholder{
    color: var(--gray-lighten-3);
}
.dj-simple-contact-form.style-4 textarea,
.dj-simple-contact-form.style-4 .inputbox{
    border: 1px solid rgba(var(--purple-200-rgb), 0.48);
    border-radius: 5px;
    background: rgba(var(--purple-600-rgb), 0.48);
}