@import url('vCamp/css/style.css');
@import url('vCamp/css/responsive.css');

.landing-page .title-style-one .title span:before {
    display: none;
}

.main-title h2 {
    font-family: 'gilroy-bold';
    font-size: 68px
}

.main-title h2 span {
    position: relative;
    z-index: 1;
}

.main-title h2 span img {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%)
}

.main-title .txt-lg {
    font-size: 38px;
    color: #2A2A2A;
    padding-top: 88px
}

.main-title .txt-lg span {
    text-decoration: underline;
}

.main-title .txt-sm {
    font-size: 28px;
    color: #7C7C7C;
    font-weight: 300;
    padding-top: 38px
}

.theme-main-menu .purchase-button {
    width: 170px;
    line-height: 50px;
    text-align: center;
    border-radius: 40px;
    color: #fff;
    font-size: 16px;
    background: var(--red-one)
}

.landing-banner {
    padding: 190px 0 0;
    height: 1150px;
    position: relative;
    text-align: center;
    z-index: 5
}

.landing-banner .landing-heading {
    color: #fff;
    font-size: 80px;
    line-height: 1.21em
}

.landing-banner .feature-block .main-count {
    font-size: 82px;
    line-height: initial;
    color: var(--red-one);
    margin-bottom: -14px
}

.landing-banner .feature-block p {
    font-family: 'gorditalight';
    color: #fff;
    font-size: 24px;
    margin: 0
}

.landing-banner .screen_01 {
    margin-top: 15px;
    animation: jumpTwo 7s infinite linear
}

.landing-banner .shape-one {
    right: 2%;
    top: 23%;
    animation: fade-in 2.5s infinite linear
}

.landing-banner .shape-two {
    left: 5%;
    top: 25%;
    animation: jumpThree 5s infinite linear
}

.primary-feature {
    background: url(img/bg_01.png) no-repeat center;
    background-size: cover;
    padding: 215px 0 170px;
    position: relative;
    z-index: 1
}

.primary-feature .feature-block .icon {
    width: 70px;
    height: 70px;
    padding: 3px;
    background: #161616;
    border-radius: 50%;
    margin: 0 auto
}

.primary-feature .feature-block h4 {
    font-size: 22px;
    letter-spacing: -.5px;
    line-height: 1.75em;
    margin: 25px 0 0
}

.primary-feature .shape-one {
    left: 0;
    top: 33%;
    animation: fade-in 2s infinite linear
}

.home-demo-section .controls {
    border: 1px solid #E9E9E9;
    border-radius: 15px;
    padding: 15px 15px
}

.home-demo-section .controls button {
    font-size: 18px;
    line-height: 43px;
    border-radius: 8px;
    padding: 0 28px;
    margin: 5px 3px;
    cursor: pointer;
    transition: all .3s ease-in-out
}

.home-demo-section .controls button.mixitup-control-active {
    background: #000;
    color: #fff;
}

.home-demo-section .home-item {
    width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
    display: inline-table;
    /* display: inline-block; */
    padding: 10px 15px;
    /* padding: 0 15px; */
    text-align: center;
    height: 400px;
}

.home-demo-section .mixitUp-containerOne {
    margin: 0 -15px;
}

.home-demo-section .img-meta {
    border-radius: 15px;
    overflow: hidden;
    display: block;
    position: relative;
    border: 1px solid #fff;
    transform: rotateX(0) rotateY(0);
    transform-style: preserve-3d;
    transition-duration: .1s;
    transition-timing-function: ease !important
}

.home-demo-section .img-meta.is-out {
    transform: rotateX(0) rotateY(0) !important;
    transition-duration: 1s
}

.home-demo-section .img-meta img {
    transition: all .3s ease-in-out;
}

.home-demo-section .img-meta.black {
    border: 1px solid #000;
}

.home-demo-section .img-meta span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100px;
    padding: 0 15px;
    line-height: 35px;
    background: var(--red-one);
    color: #fff;
    border-radius: 5px;
    font-size: 15px;
    opacity: 0;
    transition: all .3s ease-in-out
}

.home-demo-section .img-meta:hover span {
    opacity: 1;
}

.home-demo-section .wrapper .page-name {
    font-family: 'gorditamedium';
    font-size: 20px;
    color: #000;
    letter-spacing: -.4px;
    margin: 27px 0 0
}

.home-demo-section .wrapper .page-category {
    font-size: 15px;
    color: #989898;
}

.home-demo-section .wrapper {
    margin-bottom: 55px;
}

.responsive-feature {
    position: relative;
    z-index: 5
}

.responsive-feature .title-style-one .upper-title {
    color: var(--red-one);
    letter-spacing: 3px;
    padding-bottom: 30px
}

.responsive-feature p {
    color: rgba(255, 255, 255, .7);
    line-height: 35px;
    font-size: 17px
}

.responsive-feature .screen-one {
    left: 0;
    top: 44%;
    max-width: 46%;
    transform: translateY(-50%)
}

.responsive-feature .shape-one {
    top: -130px;
    left: 19%;
    animation: fade-in 2s infinite linear
}

.responsive-feature .shape-two {
    bottom: -100px;
    right: 0;
    animation: fade-in 2s infinite linear
}

.responsive-feature .shape-three {
    bottom: 8%;
    left: 25%;
    animation: jumpThree 5s infinite linear
}

.load-speed-section {
    background: url(img/bg_02.png) no-repeat center;
    background-size: cover;
    position: relative;
    z-index: 1
}

.load-speed-section .shape-one {
    top: 15%;
    right: 40%;
    animation: jumpThree 5s infinite linear
}

.load-speed-section .shape-two {
    top: 75%;
    right: 40%;
    animation: rotated 15s infinite linear
}

.load-speed-section .block-container {
    position: relative;
    z-index: 2;
}

.load-speed-section .block-container .block-wrapper {
    height: 240px;
    text-align: center;
    padding: 20px 15px;
    background: #FFFFFF;
    box-shadow: 0 40px 80px rgba(0, 30, 57, .04);
    border-radius: 15px
}

.load-speed-section .block-container .rating {
    font-weight: 500;
    font-size: 48px;
    color: #000;
    line-height: initial
}

.load-speed-section .block-container p {
    color: #000;
    font-size: 17px;
    line-height: 26px;
    margin: 0
}

.load-speed-section .block-container .rating-star li {
    font-size: 15px;
    margin: 0 4px;
    color: #B3B3B3
}

.load-speed-section .block-container .rating-star li .bi-star-fill {
    color: #FFB043;
}

.element-section {
    background: url(img/bg_03.png) no-repeat center;
    background-size: cover;
    position: relative;
    z-index: 1
}

.element-section .shape-one {
    left: 0;
    top: -170px;
    animation: fade-in 2.2s infinite linear
}

.element-section .bg-wrapper {
    text-align: center;
    background: #FFFFFF;
    box-shadow: 0 4px 100px rgba(0, 0, 0, .25);
    border-radius: 50px;
    padding: 20px 20px 30px
}

.element-section .bg-wrapper .count {
    font-size: 100px;
    color: var(--red-one);
    line-height: initial;
    margin-bottom: -5px
}

.element-section .bg-wrapper p {
    font-size: 62px;
    line-height: 1.16em;
    color: #000
}

.lan-inner-page-section {
    background: url(img/bg_02.png) no-repeat center;
    background-size: cover;
    position: relative;
    z-index: 1
}

.lan-inner-page-section .title span {
    font-size: 1.38em;
}

.lan-inner-page-section .theme-btn-one {
    line-height: 55px;
    width: 190px;
    border-radius: 30px
}

.lan-inner-page-section .screen-one {
    left: 0;
    top: 50%;
    max-width: 47%;
    transform: translateY(-50%)
}

.lan-inner-page-section .shape-one {
    top: 13%;
    right: 8%;
    animation: jumpThree 5s infinite linear
}

.lan-inner-page-section .shape-two {
    bottom: 8%;
    right: 51%;
    animation: rotated 15s infinite linear
}

.lan-core-feature-section {
    position: relative;
    z-index: 5
}

.lan-core-feature-section .shape-one {
    right: 0;
    top: -140px;
    animation: fade-in 2.5s infinite linear
}

.lan-core-feature-section .shape-two {
    left: 8%;
    top: 10%;
    animation: jumpThree 5s infinite linear
}

.lan-core-feature-section .content-wrapper {
    margin: 0 -20px;
}

.lan-core-feature-section .block {
    padding: 0 20px;
    margin-top: 50px
}

.lan-core-feature-section .feature {
    width: 230px;
    height: 220px;
    text-align: center;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50px;
    transition: all .3s ease-in-out
}

.lan-core-feature-section .feature .icon {
    height: 54px;
}

.lan-core-feature-section .feature .icon img {
    max-height: 100%;
    transition: all .3s ease-in-out;
}

.lan-core-feature-section .feature p {
    font-size: 20px;
    line-height: 30px;
    color: #fff;
    margin: 25px 0 0
}

.lan-core-feature-section .feature:hover {
    background: #101010;
}

.lan-core-feature-section .feature:hover .icon img {
    transform: translateY(-5px);
}

.ln-footer {
    background: url(img/bg_02.png) no-repeat center;
    background-size: cover;
    position: relative;
    z-index: 6;
    padding: 155px 0 180px
}

.ln-footer .purchase-button {
    width: 210px;
    line-height: 55px;
    text-align: center;
    border-radius: 30px;
    color: #fff;
    font-size: 16px;
    transition: all .3s ease-in-out;
    background: var(--red-one)
}

.ln-footer .purchase-button:hover {
    background: #212121;
}

.ln-footer .screen-one {
    top: -16%;
    left: 4%;
    animation: jumpThree 10s infinite linear
}

.ln-footer .screen-two {
    top: -7%;
    right: 5%;
    animation: jumpTwo 10s infinite linear
}

.ln-footer .screen-three {
    bottom: 4%;
    right: 8%;
    animation: jumpThree 10s infinite linear
}

.ln-footer .screen-four {
    bottom: 0;
    left: 2%
}

.ln-footer .shape-one {
    top: 27%;
    left: 0;
    animation: fade-in 2s infinite linear
}

.ln-footer .shape-two {
    top: 39%;
    left: 15%;
    animation: jumpTwo 5s infinite linear
}

.ln-footer .shape-three {
    top: 39%;
    right: 15%;
    animation: rotated 15s infinite linear
}

@media (min-width:1200px) and (max-width:1399px) {
    .landing-banner .landing-heading {
        font-size: 70px;
    }

    .landing-banner .feature-block .main-count {
        font-size: 70px;
    }

    .landing-banner {
        height: 1010px;
    }

    .primary-feature {
        padding-top: 270px;
    }
}

@media (max-width:1199px) {

    .landing-banner .shapes,
    .primary-feature .shape-one,
    .responsive-feature .shape-one,
    .responsive-feature .shape-two,
    .responsive-feature .shape-three,
    .load-speed-section .shapes,
    .element-section .shape-one,
    .lan-core-feature-section .shapes,
    .lan-inner-page-section .shape-one,
    .lan-inner-page-section .shape-two,
    .ln-footer .shapes {
        display: none;
    }

    .landing-banner .landing-heading {
        font-size: 55px;
        line-height: 1.3em;
    }

    .landing-banner .feature-block .main-count {
        font-size: 45px;
        margin-bottom: -8px;
    }

    .landing-banner .feature-block p {
        font-size: 18px;
    }

    .landing-banner .screen_01 {
        margin: 0;
        transform: translateY(40px);
    }

    .landing-banner {
        height: auto;
        padding-top: 170px;
    }

    .primary-feature {
        padding: 120px 0 100px;
    }

    .primary-feature .feature-block .icon {
        width: 55px;
        height: 55px;
        padding: 15px;
    }

    .primary-feature .feature-block h4 {
        font-size: 20px;
        line-height: 1.6em;
        margin-top: 15px;
    }

    .home-demo-section .controls button {
        font-size: 17px;
        line-height: 40px;
        padding: 0 15px;
    }

    .home-demo-section .controls {
        padding: 10px;
    }

    .home-demo-section .wrapper .page-name {
        font-size: 20px;
        margin-top: 18px;
    }

    .responsive-feature .title-style-one .upper-title {
        padding-bottom: 14px;
    }

    .load-speed-section .block-container .rating {
        font-size: 35px;
    }

    .load-speed-section .block-container p {
        font-size: 16px;
    }

    .load-speed-section .block-container .block-wrapper {
        height: 185px;
    }

    .element-section .bg-wrapper .count {
        font-size: 60px;
        margin: 0;
    }

    .element-section .bg-wrapper p {
        font-size: 35px;
    }

    .element-section .bg-wrapper {
        padding: 15px 20px;
    }

    .lan-core-feature-section .feature {
        width: 200px;
        height: 190px;
    }

    .lan-core-feature-section .feature p {
        font-size: 17px;
        line-height: 28px;
        margin-top: 20px;
    }

    .lan-core-feature-section .feature .icon {
        height: 45px;
    }

    .ln-footer {
        padding: 80px 0 70px;
    }
}

@media (max-width:991px) {
    .theme-main-menu .purchase-button {
        margin-right: 60px;
        width: 155px;
        font-size: 15px;
        line-height: 46px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    .responsive-feature .screen-one {
        max-width: 37%;
    }

    .lan-inner-page-section .screen-one {
        max-width: 40%;
    }
}

@media (min-width:576px) and (max-width:991px) {
    .home-demo-section .home-item {
        width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
    }
}

@media (max-width:767px) {
    .landing-banner .landing-heading {
        font-size: 42px;
    }

    .primary-feature .feature-block h4 {
        font-size: 18px;
    }

    .home-demo-section .controls {
        display: none !important;
    }

    .responsive-feature .screen-one,
    .lan-inner-page-section .screen-one {
        position: static;
        transform: none;
        max-width: 100%;
    }
}

@media (max-width:575px) {
    .theme-main-menu .purchase-button {
        margin-right: 45px;
        width: 133px;
        font-size: 14px;
        line-height: 40px;
    }

    .home-demo-section .home-item {
        width: 100%;
    }
}