/*================================================
Template name: Softree
Version: 1.0
Author: SITLBD       
Author url: https://www.sitlbd.com/  


[Table of Content]

----------------- Extra large device ----------------

01. Portfolio landing page
02. Crypto landing page
03. Hosting landing page
04. VPN landing page
05. Blog page

----------------- Large device ----------------- 

06. Portfolio landing page
07. Crypto landing page
08. Hosting landing page
09. Hosting page dark version
10. VPN landing page
11. Blog page

----------------- Medium device -----------------

12. General css
13. Portfolio landing page 
14. Crypto landing page
15. Crypto page dark version
16. Hosting landing page
17. Hosting page dark version
18. VPN landing page
19. Blog page

----------------- Small device ----------------- 

20. General css
21. Portfolio landing page 
22. Crypto landing page
23. Crypto page dark version
24. Hosting Landing page
25. Hosting page dark version
26. VPN landing page
27. Blog page
28. Single blog page

----------------- Extra small device -----------------

29. General css
30. Portfolio landing page
31. Crypto landing page
32. Crypto page dark version
33. Hosting Landing page
34. Hosting page dark version
35. VPN landing page
36. Blog page
37. Single blog page
38. Contact page

================================================*/


/*===================================================
 Extra large device
====================================================*/
@media (min-width:1200px) and (max-width:1550px){

    /*========================== 01. Portfolio landing page ==========================*/
    .personal .menubar {
        padding: 30px 70px;
    }

    /*========================== 02. Crypto landing page ==========================*/
    .crypto .menubar {
        padding: 30px 100px;
    }
    .crypto .menubar .navbar .navbar-brand{
        width: 150px;
    }
    .crypto .menubar .navbar .navbar-brand img{
        width: 100%;
    }
    .crypto .menubar .navbar .menu .nav-item.testimonial{
        display: none;
    }
    .crypto .banner h1 {
        font-size: 52px;
        line-height: 62px;
    }
    .crypto .banner .coin1 {
        top: 0%;
        right: 45%;
    }
    .crypto .banner .coin2 ,
    .crypto .banner .coin3 {
        top: -8%;
    }
    .crypto .banner ul{
        display: block;
    }
    .crypto .banner ul li:first-child{
        margin-bottom: 30px;
    }
    .crypto .client .crypto-client-slider .button-prev{
        left: 43%;
    }
    .crypto .client .crypto-client-slider .button-next{
        right: 43%;
    }
    /*========================== 03. Hosting landing page ==========================*/
    .hosting .menubar .navbar .navbar-brand{
        width: 150px;
    }
    .hosting .menubar .navbar .navbar-brand img{
        width: 100%;
    }
    .hosting .banner .text h1 {
        font-size: 53px;
        line-height: 70px;
    }
    .hosting .banner .banner-shape {
        top: -40px;
        left: 65px;
    }
    /*========================== 04. VPN landing page ==========================*/
    
    .vpn .menubar .navbar .navbar-brand{
        width: 150px;
    }
    .vpn .menubar .navbar .navbar-brand img{
        width: 100%;
    }
    .vpn .device .image img,
    .vpn .download .image img,
    .vpn .app .image img{
        width: 100%;
    }
    .vpn .device2 .image {
        margin-left: -120px;
    }
    .vpn .download .image {
        margin-left: -145px;
    }
    /*========================== 05. Blog page ==========================*/
    .blog-page .menubar {
        padding: 30px 70px;
    }
}

/*===================================================
 Large device 
=====================================================*/
@media (min-width:992px) and (max-width:1199px){
    
    /*========================== 06. Portfolio landing page ==========================*/
    .personal .section-title {
        font-size: 42px;
        line-height: 54px;
    }
    .personal .menubar {
        padding: 30px 50px;
    }
    .personal .header-menu > ul > li {
        padding-left: 12px;
        padding-right: 12px;
    }
    span.submenu-button:before {
        right: -10px;
    }
    .personal .menubar .navbar .menu .nav-item.testimonial{
        display: none;
    }
    .personal .menubar .navbar .navbar-brand{
        width: 150px;
    }
    .personal .menubar .navbar .navbar-brand img{
        width: 100%;
    }
    .personal .banner .overlay{
        padding: 225px 0;
    }
    .personal .banner .banner-text h1 {
        font-size: 55px;
        line-height: 75px;
    }
    .personal-dark .service .shapes .shape1{
        top: 18%;
    }
    .personal-dark .service .shapes .shape2{
        bottom: 5%;
    }
    .personal .work .item h3 {
        font-size: 27px;
    }
    .personal .team .item:after {
        width: 250px;
        height: 250px;
    }
    .personal .portfolio .item .overlay {
        padding: 20px;
    }
    .personal .portfolio .item .overlay a {
        bottom: 20px;
        left: 20px;
    }
    .personal .portfolio .item .overlay h3 {
        font-size: 28px;
    }
    .personal .pricing .item h3 {
        font-size: 22px;
    }
    /*========================== 07. Crypto landing page ==========================*/
    .crypto .header-menu > ul > li {
        padding-left: 10px;
        padding-right: 10px;
    }
    .crypto .title h2 {
        font-size: 42px;
        line-height: 54px;
    }
    .crypto .menubar{
        padding: 30px 50px;
    }
    .crypto .menubar .navbar .navbar-brand{
        width: 150px;
    }
    .crypto .menubar .navbar .navbar-brand img{
        width: 100%;
    }
    .crypto .banner .all-img {
        margin-bottom: 30px;
    }
    .crypto .banner h1 {
        font-size: 42px;
        line-height: 54px;
    }
    .crypto .banner p {
        width: 100%;
    }
    .crypto .banner .coin1 {
        top: 3%;
        right: 45%;
    }
    .crypto .banner .coin2 {
        top: -7%;
        right: 38%;
    }
    .crypto .banner .coin3 {
        top: -2%;
        right: 57%;
    }
    .crypto .about .m-75,
    .crypto .about .m-35 {
        margin-left: 0;
        margin-right: 0;
    }
    .crypto .about .title h2{
        font-size: 44px;
    }
    .crypto .system .content .table tbody td span {
        margin-left: 0;
    }
    .crypto .feature .nav-tabs .nav-link {
        width: 140px;
    }
    .crypto .feature .tab-content .tab-pane h3 {
        font-size: 30px;
        line-height: 42px;
    }
    .crypto .feature .tab-content .tab-pane ul li .svg {
        margin-right: 0px;
    }
    .crypto .signup button{
        padding: 0 28px;
    }
    .crypto .team .item .image {
        height: 330px;
    }
    .crypto .newsletter h2 {
        padding: 0 45px;
    }
    .crypto .client .crypto-client-slider .button-prev {
        left: 40%;
    }
    .crypto .client .crypto-client-slider .button-next {
        right: 39%;
    }
    .crypto .fun .item {
        padding-left: 45px;
    }
    .crypto .blog .item .text a {
        font-size: 22px;
    }

    /*========================== 08. Hosting landing page ==========================*/
    .hosting .header-menu > ul > li {
        padding-left: 15px;
        padding-right: 15px;
    }
    .hosting .title h2{
        font-size: 40px;
    }
    .hosting .menubar {
        padding: 15px 50px;
    }
    .hosting .menubar .navbar .navbar-brand{
        width: 150px;
    }
    .hosting .menubar .navbar .navbar-brand img{
        width: 100%;
    }
    .hosting .menubar .navbar .menu .nav-item.testimonial{
        display: none;
    }

    .hosting .banner .row{
        align-items: unset !important;
    }
    
    .hosting .banner .banner-shape {
        top: 0;
        left: 158px;
    }
    .hosting .banner{
        padding: 120px;
    }
    .hosting .banner .text h1 {
        font-size: 52px;
        line-height: 66px;
    }
    .hosting .banner .text p {
        width: 100%;
    }
    .hosting .feature {
        padding-top: 0;
        padding-bottom: 120px;
    }
    .hosting .get-start{
        background: #E4EAFF;
    }
    .hosting .pricing .item p {
        padding-left: 25px;
        padding-right: 25px;
    }
    .hosting .pricing .item ul {
        padding-left: 0;
    }
    .hosting .about .title h2 {
        font-size: 36px;
        line-height: 54px;
    }
    .hosting .about .about-shape {
        top: 15px;
        left: 70px;
    }
    .hosting .top-footer .pl-70 {
        padding-left: 40px;
    }
    .hosting .blog .item .text a {
        font-size: 18px;
    }
    .hosting .blog .item .text img {
        margin-right: 7px;
    }
    /*========================== 09. Hosting page dark version ==========================*/
    .hosting-dark .newsletter .border {
        width: 98%;
    }
    .hosting-dark .contact .border {
        width: 98%;
    }

    /*========================== 10. VPN landing page ==========================*/
    .vpn .menubar .btn-design {
        padding: 0 40px;
    }
    .vpn .menubar .navbar .navbar-brand{
        width: 180px;
    }
    .vpn .menubar .navbar .navbar-brand img{
        width: 100%;
    }
    .vpn .menubar .navbar .menu .nav-item {
        padding: 0 10px;
    }
    .vpn .menubar .navbar .menu .nav-item ul li{
        padding: 0 25px;
    }
    .vpn .menubar .navbar .menu .nav-item.testimonial{
        display: none;
    }
    .vpn .banner{
        padding: 120px;
    }
    
    .vpn .banner .text h1 {
        font-size: 52px;
        line-height: 66px;
        padding-top: 50px;
    }
    .vpn .service .item h3 {
        font-size: 21px;
    }
    .vpn .device .image img,
    .vpn .download .image img,
    .vpn .app .image img{
        width: 100%;
    }
    
    .vpn .device2 .image ,
    .vpn .download .image {
        margin-left: 0;
    }
    .vpn .feature .item h3 {
        font-size: 19px;
    }
    .vpn .app ul{
        display: block !important;
    }
    .vpn .app ul li{
        margin-bottom: 30px;
    }
    .vpn .app ul li:last-child{
        margin-bottom: 0;
    }
    .vpn .notification .title h2{
        font-size: 40px;
    }
    .vpn .top-footer p{
        font-size: 14px;
    }
    /*========================== 11. Blog page ==========================*/
    .blog-page .section-title {
        font-size: 42px;
        line-height: 54px;
    }
    .blog-page .menubar {
        padding: 30px 50px;
    }
    .blog-page .menubar .navbar .menu .nav-item.testimonial{
        display: none;
    }
    .blog-page .menubar .navbar .navbar-brand{
        width: 150px;
    }
    .blog-page .menubar .navbar .navbar-brand img{
        width: 100%;
    }
    .blog-page .menubar .header-menu ul li.has-sub-item:after {
        top: 35px;
        right: 25px;
    }
}
/*===================================================
Medium device 
======================================================*/
@media (min-width:768px) and (max-width:991px){
    
    /*========================== 13. Portfolio landing page ==========================*/
    .p-120{
        padding: 100px 0;
    }
    .mt-md-30{
        margin: auto;
        margin-top: 30px;
    }
    
    .mb-md-45{
        margin-bottom: 45px;
    }
    .mt-md-50{
        margin-top: 50px;
    }
    .personal .menubar ul li{
        padding: 0;
    }
    .personal .section-title {
        font-size: 38px;
        line-height: 48px;
    }
    .personal .menubar {
        padding: 15px 50px;
    }
    .personal .banner .overlay{
        padding: 150px 0;
    }
    .personal .banner .banner-text h1 {
        font-size: 48px;
        line-height: 64px;
    }
    .personal .banner .banner-text p {
        padding-left: 100px;
        padding-right: 100px;
    }
    .personal-dark .service .shapes .shape1{
        top: 13%;
    }
    .personal-dark .service .shapes .shape2{
        bottom: 5%;
    }
    
    .personal .about .image {
        margin-bottom: 50px;
    }
    
    .personal .about .title{
        margin-top: 80px;
    }
    .personal .team,
    .personal .pricing,
    .personal .client,
    .personal .brand{
        padding-bottom: 100px;
    }
    .personal .team .item:after {
        width: 280px;
        height: 280px;
    }
    .personal .client .image{
        margin-bottom: 50px;
    }
    .personal .contact .text {
        padding-bottom: 100px;
    }
    .personal .contact form {
        padding-left: 40px;
    }
    
    .personal .bottom-footer {
        text-align: center !important;
    }
    .personal .bottom-footer ul{
        justify-content: center;
    }

    /*========================== 14. Crypto landing page ==========================*/
    .crypto .title h2 {
        font-size: 38px;
        line-height: 48px;
    }
    .crypto .menubar{
        padding: 15px 50px;
    }
    .crypto .menubar .navbar .menu{
        background: #fff;
        box-shadow: 0 5px 10px #777;
    }
    .crypto .menubar ul li{
        padding: 0;
    }
    
    .crypto .banner {
        padding: 100px;
    }
    .crypto .banner .all-img{
        margin-top: 50px;
        margin-bottom: 30px;
    }
    .crypto .banner h1 {
        font-size: 42px;
        line-height: 54px;
    }
    .crypto .banner p {
        width: 100%;
    }
    .crypto .banner .coin1 {
        top: -1%;
        right: 44%;
    }
    .crypto .banner .coin2 {
        top: -13%;
        right: 38%;
    }
    .crypto .banner .coin3 {
        top: -8%;
        right: 57%;
    }
    
    .crypto .about .m-75 {
        margin-left: 0;
        margin-right: 0;
    }
    
    .crypto .about .item-border {
        margin-left: 25px;
        margin-right: 25px;
    }
    .crypto .system .content .table tbody td span {
        margin-left: 0;
    }
    
    .crypto .system .content .search-area ul li {
        padding: 0 20px;
    }
    .crypto .system .content .search-area form {
        margin-left: 0;
    }
    .crypto .system .content .table thead th button {
        font-size: 16px;
    }
    .crypto .system .content .table thead th button .svg {
        margin-left: 10px;
    }
    
    .crypto .feature .tab-content {
        padding-top: 80px;
    }
    .crypto .feature .nav-tabs .nav-link {
        width: 100px;
        line-height: 22px;
        padding-top: 20px;
    }
    .crypto .feature .tab-content .tab-pane .feature-img{
        margin-left: 45%;
        -webkit-transform: translateX(-40%);
        -moz-transform: translateX(-40%);
        -ms-transform: translateX(-40%);
        -o-transform: translateX(-40%);
        transform: translateX(-40%);
        margin-bottom: 50px;
    }
    .crypto .feature .tab-content .tab-pane .feature-coin{
        left: 45%;
    }
    
    
    .crypto .signup h2 {
        line-height: 48px;
    }
    
    .crypto .team .mt-md-30{
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
    }
    .crypto .team .item .image {
        height: 385px;
    }
    
    .crypto .faq .tab-pane img{
        margin-bottom: 30px;
    }
    

    .crypto .app img{
        margin-left: 14%;
        margin-bottom: 50px;
    }
    
    
    .crypto .client .crypto-client-slider .button-next {
        right: 35%;
    }
    .crypto .client .crypto-client-slider .button-prev {
        left: 36%;
    }
    
    .crypto .fun .item {
        padding-left: 0;
    }
    .crypto .fun .item p{
        font-size: 14px;
    }
    .crypto .fun .item:after {
        right: 0;
    }
    
    .crypto .network .map-part {
        padding-bottom: 0;
    }
    .crypto .network .item p {
        font-size: 20px;
    }
    .crypto .network .item h3 {
        font-size: 45px;
    }
    .crypto .brand {
        padding-bottom: 100px;
    }
    .crypto .brand .item a img{
        width: 100%;
    }
    .crypto .contact ul{
        padding-bottom: 40px;
    }
    .crypto .contact .form-part {
        padding-left: 0;
    }
    .crypto .top-footer {
        padding-top: 390px;
    }
    
    /*========================== 15. Crypto page dark version ==========================*/
    .crypto-dark .newsletter .border {
        width: 95%;
    }
    /*========================== 16. Hosting landing page ==========================*/
    
    .hosting .title h2 {
        font-size: 38px;
        line-height: 48px;
    }
    .hosting .menubar {
        padding: 15px 50px;
    }
    .hosting .banner .row{
        align-items: unset !important;
    }
    
    .hosting .menubar ul li{
        padding: 0;
    }
    .hosting .banner{
        padding: 100px;
    }
    .hosting .banner .banner-shape {
        top: 0;
        left: 60px;
    }
    .hosting .banner .text h1 {
        font-size: 36px;
        line-height: 52px;
        padding-top: 30px;
    }
    .hosting .banner .text p {
        width: 100%;
        padding-bottom: 30px;
    }
    .hosting .feature .title p {
        padding: 0 50px;
    }
    .hosting .feature {
        padding-top: 0;
        padding-bottom: 100px;
    }
    .hosting .feature .mt-md-30{
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
    }
    .hosting .domain .title p {
        padding-left: 0;
        padding-right: 0;
    }
    .hosting .domain .domain-bg {
        padding: 58px;
    }
    .hosting .domain .domain-bg .hosting-slider {
        padding-top: 30px;
    }
    .hosting .service .mb-50 {
        margin-bottom: 30px;
    }
    .hosting .get-start{
        background: #E4EAFF;
    }
    .hosting .get-start a {
        margin-top: 0;
    }
    .hosting .pricing .mt-md-30{
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
    }
    .hosting .pricing:before {
        height: 60%;
    }
    .hosting .pricing .item h3 {
        padding-bottom: 15px;
    }
    .hosting .pricing .item p {
        padding-left: 25px;
        padding-right: 25px;
    }
    .hosting .pricing .item ul {
        padding-left: 0;
    }
    .hosting .about .md-align{
        text-align: center;
    }
    .hosting .about .about-img{
        margin-bottom: 50px;
    }
    .hosting .about .about-shape {
        top: 15px;
        left: 31%;
    }
    .hosting .newsletter form {
        margin-top: 50px;
    }
    
    .hosting .client .quote{
        padding-top: 30px;
    }
    .hosting .client .hosting-client-slider{
        padding-bottom: 100px;
    }
    .hosting .client .lg-device{
        display: none;
    }
    .hosting .client .md-device{
        display: block;
    }
    .hosting .blog{
        padding-bottom: 100px;
    }
    .hosting .blog .mt-md-30{
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
    }
    .hosting .contact .form-part{
        margin-top: 50px;
    }
    .hosting footer{
        background: #3C6FF7;
    }
    .hosting .top-footer{
        padding-top: 120px;
    }
    .hosting .top-footer .pl-70 {
        padding-left: 0;
    }
    /*========================== 17. Hosting page dark version ==========================*/
    .hosting-dark .newsletter .border {
        width: 95%;
    }
    .hosting-dark .contact .border {
        width: 95%;
    }
    .hosting-dark .header-menu #menu-button {
        color: #fff;
    }
    /*========================== 18. VPN landing page ==========================*/
    .vpn .title h2 {
        font-size: 38px;
        line-height: 48px;
    }
    .vpn .menubar{
        padding: 20px 50px;
    }
    .vpn .menubar .navbar .navbar-brand{
        width: 200px;
    }
    .vpn .menubar .navbar .navbar-brand img{
        width: 100%;
    }
    
    .vpn .banner{
        padding: 100px;
    }
    
    .vpn .banner .text h1 {
        font-size: 42px;
        line-height: 60px;
        padding-top: 50px;
    }
    
    
    .vpn .device .image img,
    .vpn .download .image img,
    .vpn .app .image img{
        width: 100%;
    }
    .vpn .device .image,
    .vpn .download .image img,
    .vpn .app .image{
        padding-bottom: 30px;
    }
    
    .vpn .device2 .image ,
    .vpn .download .image {
        margin-left: 0;
    }
    .vpn .feature .title p {
        padding: 0 70px;
    }
    
    .vpn .pricing .title p {
        padding: 0 50px;
    }
    
    .vpn .pricing .item:hover {
        padding: 50px 0;
        margin-top: 0;
    }
    .vpn .blog .item .text h3, 
    .vpn .blog .item .overlay h3 {
        font-size: 20px;
    }
    .vpn .notification .btn-design{
        padding: 0 20px;
    }
    .vpn .notification h2 {
        font-size: 28px;
        line-height: 46px;
    }
    .vpn .top-footer {
        padding-top: 100px;
    }
    .vpn .top-footer .pl-70 {
        padding-left: 0;
        padding-top: 30px;
    }
    /*========================== 19. Blog page ==========================*/
    .blog-page .title h2 {
        font-size: 38px;
        line-height: 48px;
    }
    .blog-page .menubar {
        padding: 15px 50px;
    }
    

    .blog-page .content {
        padding: 100px 0;
    }
    .blog-page .all-blogs{
        margin-top: 50px;
    }
    .blog-page .top-footer{
        padding-top: 100px;
    }
    .blog-page .top-footer .pl-70 {
        padding-left: 0;
        padding-top: 30px;
    }
    
}
/*=================================================== 
Small device 
=====================================================*/
@media (min-width:576px) and (max-width:767px){

    /*========================== 21. Portfolio landing page ==========================*/
    .p-120{
        padding: 80px 0;
    }
    .mt-sm-20{
        margin-top: 20px;
    }
    .mt-md-30,
    .mt-sm-30{
        margin-top: 30px;
    }
    .mb-md-45{
        margin-bottom: 45px;
    }
    .mt-sm-65{
        margin-top: 65px;
    }
    .mb-sm-65{
        margin-bottom: 65px;
    }
    .mb-95 {
        margin-bottom: 65px;
    }
    .mt-sm-40{
        margin-top: 40px;
    }
    .mt-md-50{
        margin-top: 50px;
    }
    .personal .title{
        margin-bottom: 60px;
    }
    .personal .title h2 {
        font-size: 32px;
        line-height: 46px;
    }
    .personal .menubar {
        padding: 15px 50px;
    }
    .personal .menubar .navbar .navbar-brand{
        width: 150px;
    }
    .personal .menubar .navbar .navbar-brand img{
        width: 100%;
    }
    .personal .menubar ul li{
        padding: 0;
    }

    .personal .banner .overlay{
        padding: 100px 0;
    }
    .personal .banner .banner-text h1 {
        font-size: 38px;
        line-height: 50px;
    }
    .personal .banner .banner-text p {
        padding-left: 60px;
        padding-right: 60px;
    }
    .personal .banner .shapes .shape1 {
        right: 15px;
    }
    .personal .banner .shapes .shape3 {
        top: 90px;
        left: 35px;
    }
    
    .personal-dark .service .shapes .shape1{
        top: 10%;
    }
    .personal-dark .service .shapes .shape2{
        bottom: 1%;
    }
    .personal .about .image {
        margin-bottom: 50px;
    }
    .personal .about .title{
        margin-top: 80px;
    }
    
    .personal .portfolio ul li {
        padding: 0 10px;
    }
    .personal .portfolio ul li a {
        padding: 0 15px;
    }
    .personal .team,
    .personal .pricing,
    .personal .client,
    .personal .brand{
        padding-bottom: 80px;
    }
    .personal .team .item:after {
        width: 445px;
        height: 340px;
    }
    .personal .team .item .text {
        width: 92%;
    }
    .personal .pricing .title {
        padding-left: 0;
        padding-right: 0;
    }
    .personal .client .image{
        margin-bottom: 50px;
    }
    .personal .contact .text {
        padding-bottom: 100px;
    }
    .personal .newsletter .btn-design {
        padding: 0 15px;
    }
    .personal .newsletter .input-field {
        padding-right: 160px;
    }
    .personal .contact form {
        padding-left: 40px;
    }
    
    .personal .bottom-footer {
        text-align: center !important;
    }
    .personal .bottom-footer p{
        padding-bottom: 20px;
    }
    .personal .bottom-footer ul{
        justify-content: center;
    }
    .personal .bottom-footer ul li {
        padding-left: 18px;
    }
    /*========================== 22. Crypto landing page ==========================*/
    .crypto .title{
        margin-bottom: 60px;
    }
    .crypto .title h2 {
        font-size: 34px;
        line-height: 46px;
    }
    
    .crypto .btn-design {
        padding: 0 30px;
    }
    .crypto .menubar{
        padding: 15px 50px;
    }
    .crypto .menubar .navbar .navbar-brand img{
        width: 70%;
    }
    .crypto .menubar .navbar .menu{
        background: #fff;
        box-shadow: 0 5px 10px #777;
    }
    .crypto .menubar ul li{
        padding: 0;
    }
    
    .crypto .banner {
        padding: 50px;
    }
    .crypto .all-img{
        margin-top: 100px;
        margin-bottom: 30px;
    }
    .crypto .banner ul li {
        margin-right: 20px;
    }
    .crypto .banner h1 {
        font-size: 40px;
        line-height: 52px;
    }
    .crypto .banner p {
        width: 100%;
    }
    .crypto .banner ul {
        padding-top: 45px;
    }
    .crypto .banner .coin1 {
        top: -1%;
        right: 42%;
    }
    .crypto .banner .coin2 {
        top: -13%;
        right: 38%;
    }
    .crypto .banner .coin3 {
        top: -8%;
        right: 57%;
    }
    .crypto .about .m-75,
    .crypto .about .m-35 {
        margin-left: 0;
        margin-right: 0;
    }
    
    .crypto .about .item-border {
        margin-left: 25px;
    }
    .crypto .about .title {
        padding-top: 30px;
    }
    .crypto .about .content a {
        margin-top: 40px;
    }
    .crypto .system .content .table tbody td span {
        margin-left: 0;
    }
    .crypto .system .content .search-area {
        display: block !important;
    }
    .crypto .system .content .search-area ul{
        margin: 30px 0;
    }
    
    .crypto .system .content .search-area ul li {
        padding: 0 20px;
    }
    .crypto .system .content .search-area form {
        margin-left: 0;
        margin-bottom: 30px;
        width: 100%;
    }
    .crypto .system .content .table thead th button {
        font-size: 16px;
    }
    .crypto .system .content .table thead th button .svg {
        margin-left: 10px;
    }
    .crypto .system .content .search-area .input-search {
        width: 100%;
    }
    
    .crypto .feature .tab-content {
        padding-top: 80px;
    }
    .crypto .feature .tab-content .tab-pane h3 {
        font-size: 34px;
    }
    .crypto .feature .tab-content .tab-pane a {
        margin-top: 40px;
    }
    .crypto .feature .nav-tabs .nav-item:nth-child(4){
        margin-left: 0;
    }
    
    .crypto .feature .nav-tabs .nav-link {
        width: 150px;
        line-height: 80px;
    }
    .crypto .feature .tab-content .tab-pane img{
        margin-left: 15%;
        margin-bottom: 50px;
    }
    .crypto .feature .tab-content .tab-pane .feature-coin{
        left: 30%;
    }
    
    .crypto .signup .mt-md-30{
        margin-top: 30px;
    }
    .crypto .signup h2 {
        line-height: 48px;
    }
    
    
    .crypto .team .item .image {
        height: 385px;
    }
    .crypto .team .item:hover .image {
        height: 340px;
    }
    
    
    .crypto .faq .tab-pane img{
        margin-bottom: 30px;
    }
    

    .crypto .app img{
        margin-bottom: 50px;
    }
    .crypto .app p{
        padding-bottom: 40px;
    }
    .crypto .newsletter h2 {
        padding: 0;
    }
    
    .crypto .client .crypto-client-slider .button-next {
        right: 30%;
    }
    .crypto .client .crypto-client-slider .button-prev {
        left: 34%;
    }
    .crypto .client .title p {
        padding: 0 30px;
    }
    .crypto .fun .item .shape {
        margin-left: auto;
        margin-right: auto;
    }
    .crypto .fun .item {
        padding-left: 0;
        text-align: center;
    }
    .crypto .fun .item p{
        font-size: 14px;
    }
    .crypto .fun .item:after {
        display: none;
    }
    .crypto .fun .mt-sm-40{
        margin-top: 40px;
    }
    
    .crypto .blog .mt-sm-30,
    .crypto .blog .mt-md-30{
        margin-top: 30px;
    }
    
    .crypto .network .map-part {
        padding-bottom: 0;
        padding-top: 250px;
    }
    .crypto .network .title {
        padding-bottom: 0;
    }
    .crypto .network .item p {
        font-size: 20px;
    }
    .crypto .network .item h3 {
        font-size: 45px;
    }
    .crypto .brand {
        padding-bottom: 80px;
    }
    .crypto .brand .item a img{
        width: 100%;
    }
    .crypto .contact ul{
        padding-bottom: 40px;
    }
    .crypto .contact .form-part {
        padding-left: 0;
    }
    .crypto .top-footer {
        padding-top: 390px;
    }
    
    /*========================== 23. Crypto page dark version ==========================*/
    .crypto-dark .newsletter .border {
        width: 95%;
    }
    /*========================== 24. Hosting Landing page ==========================*/
    .hosting .title{
        margin-bottom: 60px;
    }
    .hosting .title h2 {
        font-size: 34px;
        line-height: 46px;
    }
    .hosting .menubar{
        padding: 15px 50px;
    }
    .hosting .menubar .navbar .navbar-brand img{
        width: 70%;
    }

    .hosting .menubar ul li{
        padding: 0;
    }
    
    .hosting .banner .row{
        align-items: unset !important;
    }
    
    .hosting .banner{
        padding: 80px 50px;
    }
    .hosting .banner .banner-shape {
        top: -45px;
        left: 60px;
    }
    .hosting .banner .text h1 {
        font-size: 30px;
        line-height: 46px;
        padding-top: 30px;
    }
    .hosting .banner .text p {
        width: 100%;
        padding-bottom: 30px;
    }
    .hosting .feature {
        padding-top: 0;
        padding-bottom: 80px;
    }
    .hosting .feature .mt-sm-30{
        margin-top: 30px;
    }
    .hosting .feature .title p {
        padding: 0;
    }
    .hosting .feature .mt-md-30{
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
    }
    .hosting .domain .title p {
        padding-left: 0;
        padding-right: 0;
    }
    .hosting .domain .domain-bg {
        padding: 70px 40px;
    }
    .hosting .domain .domain-bg .hosting-slider {
        padding-top: 30px;
    }
    .hosting .domain .domain-bg form .input-domain {
        width: calc(100% - 175px);
        padding: 0 15px;
    }
    .hosting .domain .domain-bg form .select {
        width: 85px;
    }
    .hosting .domain .domain-bg form .select select{
        padding: 0;
        padding-left: 10px;
    }
    .hosting .domain .domain-bg form .select:after {
        right: 0;
    }
    .hosting .domain .domain-bg form button{
        padding: 0 15px;
    }
    .hosting .service .mb-50,
    .hosting .service .mb-sm-50 {
        margin-bottom: 30px;
    }
    .hosting .service .title p {
        padding: 0 35px;
    }

    .hosting .get-start{
        background: #E4EAFF;
    }
    .hosting .get-start a {
        margin-top: 0;
    }
    .hosting .pricing .title p {
        padding: 0 65px;
    }
    .hosting .pricing .mt-md-30{
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
    }
    .hosting .pricing .mt-sm-30{
        margin-top: 30px;
    }
    .hosting .pricing:before {
        height: 60%;
    }
    .hosting .pricing .item h3 {
        padding-bottom: 15px;
    }
    .hosting .pricing .item p {
        padding-left: 25px;
        padding-right: 25px;
    }
    .hosting .pricing .item ul {
        padding-left: 0;
    }
    .hosting .about .md-align{
        text-align: center;
    }
    .hosting .about .padd-sm{
        padding-left: 15px !important;
    }
    .hosting .about .about-img{
        margin-bottom: 50px;
    }
    .hosting .about .about-shape {
        top: 15px;
        left: 130px;
    }
    .hosting .newsletter form {
        margin-top: 50px;
    }
    
    .hosting .client .quote{
        padding-top: 30px;
    }
    .hosting .client .hosting-client-slider{
        padding-bottom: 100px;
    }
    .hosting .client .lg-device{
        display: none;
    }
    .hosting .client .md-device{
        display: block;
    }
    .hosting .blog{
        padding-bottom: 80px;
    }
    .hosting .blog .mt-md-30{
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
    }
    .hosting .blog .mt-sm-30{
        margin-top: 30px;
    }
    .hosting .world .title p {
        padding: 0 35px;
    }
    .hosting .contact .form-part{
        margin-top: 50px;
    }
    .hosting footer{
        background: #3C6FF7;
    }
    .hosting .top-footer{
        padding-top: 120px;
    }
    .hosting .top-footer .pl-70 {
        padding-left: 0;
        padding-top: 30px;
    }
    /*========================== 25. Hosting page dark version ==========================*/
    .hosting-dark .newsletter .border {
        width: 95%;
    }
    .hosting-dark .contact .border {
        width: 95%;
    }
    .hosting-dark .header-menu #menu-button {
        color: #fff;
    }
    /*========================== 26. VPN landing page ==========================*/
    .vpn .title{
        margin-bottom: 60px;
    }
    .vpn .title h2 {
        font-size: 32px;
        line-height: 42px;
    }
    .vpn .menubar{
        padding: 20px 50px;
    }
    .vpn .menubar .navbar .navbar-brand{
        width: 150px;
    }
    .vpn .menubar .navbar .navbar-brand img{
        width: 100%;
    }
    
    .vpn .banner{
        padding: 80px 50px;
    }
    
    .vpn .banner .text h1 {
        font-size: 36px;
        line-height: 50px;
        padding-top: 30px;
    }
    
    .vpn .device a,
    .vpn .download a{
        margin-top: 40px;
    }
    
    .vpn .device .image img,
    .vpn .download .image img,
    .vpn .app .image img{
        width: 100%;
    }
    .vpn .device .image,
    .vpn .download .image img,
    .vpn .app .image{
        padding-bottom: 30px;
    }
    
    .vpn .device2 .image ,
    .vpn .download .image {
        margin-left: 0;
    }
    .vpn .feature .title p {
        padding: 0 70px;
    }
    .vpn .feature .mb-md-30{
        margin-bottom: 30px;
    }
    .vpn .pricing .title p {
        padding: 0 50px;
    }
    
    .vpn .pricing .item:hover {
        padding: 50px 0;
        margin-top: 0;
    }
    .vpn .world .title p ,
    .vpn .pricing .title p ,
    .vpn .service .title p ,
    .vpn .feature .title p {
        padding: 0;
    }
    .vpn .blog .item .text h3, 
    .vpn .blog .item .overlay h3 {
        font-size: 20px;
    }
    .vpn .notification .t-left{
        text-align: center !important;
        margin-top: 40px;
    }
    .vpn .notification .bg {
        text-align: center;
    }
    .vpn .notification h2 {
        font-size: 32px;
        line-height: 50px;
    }
    
    .vpn .top-footer {
        padding-top: 100px;
    }
    .vpn .top-footer .pl-70 {
        padding-left: 0;
        padding-top: 30px;
    }
    /*========================== 27. Blog page ==========================*/
    .blog-page .menubar {
        padding: 15px 50px;
    }
    .blog-page .menubar .navbar .navbar-brand{
        width: 150px;
    }
    .blog-page .menubar .navbar .navbar-brand img{
        width: 100%;
    }
    
    
    .blog-page .content {
        padding: 80px 0;
    }
    .blog-page .all-blogs{
        margin-top: 50px;
    }
    .blog-page .top-footer {
        padding-top: 80px;
    }
    .blog-page .top-footer .pl-70 {
        padding-left: 0;
        padding-top: 30px;
    }
    /*========================== 28. Single blog page ==========================*/
    
    .single-blog .blog-item .tags {
        display: block;
    }
    .single-blog .blog-item .tags .social{
        padding-top: 20px;
    }
}
/*=================================================== 
Extra small device 
=====================================================*/
@media (min-width:320px) and (max-width:575px){
    
    
    /*========================== 30. Portfolio landing page ==========================*/
    .p-120{
        padding: 60px 0;
    }
    .mt-s-30,
    .mt-md-30,
    .mt-sm-30{
        margin-top: 30px;
    }
    .mt-s-40,
    .mt-sm-40{
        margin-top: 40px;
    }
    
    .mb-md-45,
    .mb-s-45{
        margin-bottom: 45px;
    }
    .mt-sm-65{
        margin-top: 65px;
    }
    .mb-sm-65{
        margin-bottom: 65px;
    }
    .mb-95 {
        margin-bottom: 65px;
    }
    .mt-md-50{
        margin-top: 50px;
    }
    
    .personal .title{
        margin-bottom: 40px;
    }
    .personal .title h2 {
        font-size: 28px;
        line-height: 38px;
    }
    .personal .menubar {
        padding: 15px;
    }
    .personal .menubar ul li{
        padding: 0;
    }

    .personal .menubar button{
        display: none;
    }
    .personal .menubar .navbar .navbar-brand{
        width: 150px;
    }
    .personal .menubar .navbar .navbar-brand img{
        width: 100%;
    }
    
    
    .personal .banner .overlay{
        padding-top: 100px;
        padding-bottom: 60px;
    }
    .personal .banner .banner-text h1 {
        font-size: 30px;
        line-height: 44px;
        padding: 0;
    }
    .personal .banner .banner-text p {
        padding-left: 0;
        padding-right: 0;
    }
    .personal .banner .banner-text ul li {
        margin-right: 0;
        margin-bottom: 20px;
    }
    .personal .banner .shapes img{
        width: 10%;
    }
    .personal .banner .shapes .shape1 {
        right: 15px;
        bottom: 145px;
    }
    .personal .banner .shapes .shape3 {
        top: 125px;
        left: 10px;
    }
    .personal-dark .service .shapes .shape1{
        top: 1%;
    }
    .personal-dark .service .shapes .shape2{
        bottom: 1%;
    }
    .personal .count .item {
        padding: 15px;
    }
    .personal .count .item .icon {
        margin-right: 15px;
    }
    .personal .count .item h3 {
        font-size: 40px;
    }
    .personal .about .vid-icon{
        margin-top: 20px;
    }
    
    .personal .about .title{
        margin-top: 100px;
    }
    .personal .about .image {
        margin-bottom: 50px;
    }
    .personal .about ul {
        padding-left: 20px;
    }
    
    .personal .portfolio ul li {
        padding: 0 10px;
        margin-bottom: 20px;
    }
    .personal .portfolio ul li a {
        padding: 0 15px;
    }
    .personal .portfolio .item .overlay {
        padding: 15px;
    }
    .personal .portfolio .item .overlay h3 {
        font-size: 28px;
        line-height: 32px;
    }
    .personal .portfolio .item .overlay a {
        bottom: 15px;
        left: 15px;
        height: 40px;
        width: 40px;
        line-height: 40px;
    }
    .personal .team,
    .personal .pricing,
    .personal .client,
    .personal .brand{
        padding-bottom: 60px;
    }
    .personal .team .item:after {
        width: 232px;
        height: 232px;
    }
    .personal .team .item .text {
        width: 86%;
    }
    .personal .work .item h3 {
        font-size: 25px;
        padding-bottom: 20px;
    }
    .personal .pricing .title {
        padding-left: 0;
        padding-right: 0;
    }
    .personal .pricing .item .btn-design{
        padding: 0 35px;
    }
    .personal .client .image{
        margin-bottom: 50px;
    }
    .personal .client .title {
        padding-left: 0;
        padding-right: 0;
    }
    .personal .client .button-prev, 
    .personal .client .button-next {
        margin-top: 0;
    }
    .personal .client .author{
        display: block !important;
        margin-bottom: 30px;
    }
    .personal .contact .text {
        padding: 15px;
    }
    .personal .newsletter .btn-design {
        padding: 0 15px;
        position: relative;
        top: 45px;
        left: 0;
        width: 100%;
    }
    .personal .newsletter .input-field {
        padding: 0 15px;
    }
    .personal .contact form {
        padding: 15px;
    }
    .personal .contact form button {
        margin-top: 30px;
        margin-bottom: 20px;
    }
    
    .personal .news-bg {
        padding-left: 15px;
        padding-right: 15px;
    }
    .personal .bottom-footer {
        text-align: center !important;
    }
    .personal .bottom-footer p{
        font-size: 16px;
        padding-bottom: 20px;
    }
    .personal .bottom-footer ul{
        justify-content: center;
        display: block !important;
    }
    .personal .bottom-footer ul li {
        padding-left: 0;
    }
    
    /*========================== 31. Crypto landing page ==========================*/
    .crypto .title{
        margin-bottom: 40px;
    }
    .crypto .title h2 {
        font-size: 28px;
        line-height: 38px;
    }
    .crypto .btn-design {
        padding: 0 30px;
    }
    .crypto .menubar{
        padding: 15px;
    }
    .crypto .menubar .navbar .navbar-brand img{
        width: 70%;
    }
    .crypto .menubar ul li{
        padding: 0;
    }
    
    .crypto .menubar .btn-design{
        display: none;
    }
    .crypto .banner {
        padding: 50px 15px;
    }
    .crypto .banner .text{
        padding-top: 30px;
    }
    .crypto .banner .all-img{
        margin-top: 100px;
    }
    .crypto .banner h1 {
        font-size: 24px;
        line-height: 42px;
    }
    .crypto .banner p {
        width: 100%;
    }
    .crypto .banner ul {
        padding-top: 45px;
        display: block;
    }
    .crypto .banner ul li:first-child{
        margin-bottom: 20px;
    }
    .crypto .banner .coin1 {
        top: -30%;
        right: 37%;
    }
    .crypto .banner .coin2 {
        top: -18%;
        right: 22%;
    }
    .crypto .banner .coin3 {
        top: -15%;
        right: 65%;
    }
    .crypto .about .m-75,
    .crypto .about .m-35 {
        margin-left: 0;
        margin-right: 0;
    }
    .crypto .about .title{
        padding-top: 30px;
    }
    .crypto .about .item-border {
        margin-left: 25px;
    }
    .crypto .about .content a {
        margin-top: 40px;
    }
    .crypto .system .content .table tbody td span {
        margin-left: 0;
    }
    .crypto .system .content .search-area {
        display: block !important;
    }
    .crypto .system .content .search-area ul{
        margin: 30px 0;
    }
    
    .crypto .system .content .search-area ul li {
        padding: 0 10px;
    }
    .crypto .system .content .search-area form {
        margin-left: 0;
        margin-bottom: 30px;
        width: 100%;
    }
    .crypto .system .content .table thead th button {
        font-size: 16px;
    }
    .crypto .system .content .table thead th button .svg {
        margin-left: 10px;
    }
    .crypto .system .content .search-area .input-search {
        width: 100%;
    }
    
    .crypto .feature .tab-content {
        padding-top: 0;
    }
    .crypto .feature .tab-content .tab-pane h3 {
        font-size: 28px;
        line-height: 42px;
    }
    .crypto .feature .tab-content .tab-pane .feature-coin {
        top: 0;
    }
    .crypto .feature .tab-content .tab-pane a {
        margin-top: 40px;
    }
    .crypto .feature .nav-tabs{
        justify-content: center;
    }
    .crypto .feature .nav-tabs .nav-item {
        margin: 0;
        margin-bottom: 30px;
    }
    
    
    .crypto .feature .nav-tabs .nav-link {
        width: 200px;
        line-height: 80px;
    }
    .crypto .feature .tab-content .tab-pane img{
        margin-bottom: 30px;
    }
    .crypto .feature .tab-content .tab-pane h3 {
        font-size: 26px;
    }
    
    
    .crypto .signup h2 {
        font-size: 25px;
        line-height: 42px;
    }
    .crypto .signup .form {
        padding: 30px;
    }
    
    
    .crypto .team .item .image {
        height: 310px;
    }
    
    .crypto .faq .tab-pane img{
        padding-bottom: 30px;
    }
    .crypto .faq .nav-tabs .nav-item {
        margin-bottom: 20px;
    }
    .crypto .faq .accordion .card .card-header .btn-link {
        font-size: 15px;
    }
    .crypto .faq .accordion .card .card-header .btn-link i{
        display: none;
    }
    

    .crypto .app img{
        margin-bottom: 50px;
    }
    .crypto .app p{
        padding-bottom: 40px;
    }
    .crypto .app ul{
        display: block !important;
    }
    .crypto .app ul li:first-child{
        margin-bottom: 20px;
    }
    
    .crypto .newsletter h2 {
        padding: 0;
    }
    .crypto .newsletter form button {
        width: 70px;
        font-size: 0;
    }
    .crypto .newsletter form .input-subscribe {
        padding-right: 70px;
    }
    .crypto .client .title p {
        padding: 0;
    }
    .crypto .client .crypto-client-slider .button-next {
        right: 10%;
    }
    .crypto .client .crypto-client-slider .button-prev {
        left: 20%;
    }
    .crypto .client .crypto-client-slider .item .text img{
        display: none;
    }
    .crypto .fun .item .shape {
        margin-left: auto;
        margin-right: auto;
    }
    .crypto .fun .item {
        padding-left: 0;
        text-align: center;
    }
    .crypto .fun .item p{
        font-size: 14px;
    }
    .crypto .fun .item:after {
        display: none;
    }
    
    .crypto .network .title {
        padding-bottom: 0;
    }
    .crypto .network .map-part {
        padding-bottom: 0;
        padding-top: 100px;
    }
    .crypto .network .item p {
        font-size: 20px;
    }
    .crypto .network .item h3 {
        font-size: 45px;
    }

    .crypto .brand {
        padding-bottom: 60px;
    }
    .crypto .brand .item{
        text-align: center;
    }
    .crypto .brand .mt-50{
        margin: 0;
    }
    .crypto .contact .contact-bg {
        padding: 60px 15px;
    }
    
    .crypto .contact ul{
        padding-bottom: 40px;
    }
    .crypto .contact .form-part {
        padding-left: 0;
    }
    .crypto .top-footer {
        padding-top: 350px;
        padding-bottom: 60px;
    }
    
    .crypto .bottom-footer p {
        line-height: 40px;
    }
    /*========================== 32. Crypto page dark version ==========================*/
    .crypto-dark .newsletter .border {
        width: 95%;
    }
    /*========================== 33. Hosting Landing page ==========================*/
    .hosting .title{
        margin-bottom: 40px;
    }
    .hosting .title h2 {
        font-size: 25px;
        line-height: 38px;
    }
    
    .hosting .menubar {
        padding: 15px;
    }
    .hosting .menubar .navbar .navbar-brand img{
        width: 70%;
    }

    .hosting .menubar ul li{
        padding: 0;
    }
    
    .hosting .menubar .btn-design{
        display: none;
    }
    .hosting .banner .row{
        align-items: unset !important;
    }
    
    .hosting .banner{
        padding: 50px 15px 60px 15px;
    }
    .hosting .banner .banner-shape {
        top: -15px;
        left: 30px;
        width: 45%;
    }
    .hosting .banner .text h1 {
        font-size: 26px;
        line-height: 38px;
        padding-top: 30px;
    }
    .hosting .banner .text p {
        width: 100%;
        padding-bottom: 30px;
    }
    .hosting .banner .text ul{
        display: block !important;
    }
    .hosting .banner .text ul li{
        margin-right: 0;
        margin-bottom: 20px;
    }
    .hosting .banner .text ul li:last-child{
        margin-bottom: 0;
    }
    .hosting .feature {
        padding-top: 0;
        padding-bottom: 60px;
    }
    .hosting .feature .mt-sm-30{
        margin-top: 30px;
    }
    .hosting .feature .title {
        padding-left: 0;
        padding-right: 0;
    }
    .hosting .feature .title p {
        padding: 0;
    }
    .hosting .feature .mt-md-30{
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
    }
    .hosting .domain .title p {
        padding-left: 0;
        padding-right: 0;
    }
    .hosting .domain .domain-bg {
        padding: 30px 15px;
    }
    .hosting .domain .domain-bg .hosting-slider {
        padding-top: 30px;
    }
    .hosting .domain .domain-bg form{
        display: block;
    }
    .hosting .domain .domain-bg form .input-domain {
        width: 100%;
        padding: 0 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    .hosting .domain .domain-bg form .select {
        width: 100%;
        margin: 20px 0;
    }
    .hosting .domain .domain-bg form .select select{
        padding: 10px 0;
        background: hsla(224, 92%, 60%, 0.2);
        border-radius: 5px;
        padding-left: 20px;
    }
    .hosting .domain .domain-bg form .select:after {
        right: 0;
        top: 15px;
    }
    .hosting .domain .domain-bg form button{
        width: 100%;
    }
    .hosting .service .mb-50,
    .hosting .service .mb-sm-50 {
        margin-bottom: 30px;
    }
    .hosting .service .title{
        padding-left: 0;
        padding-right: 0;
    }
    .hosting .service .title p {
        padding: 0;
    }

    .hosting .service .item {
        padding-right: 20px;
    }

    .hosting .get-start{
        background: #E4EAFF;
    }
    .hosting .get-start a {
        margin-top: 30px;
    }
    .hosting .pricing .title p {
        padding: 0;
    }
    .hosting .pricing .mt-md-30{
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
    }
    .hosting .pricing .mt-sm-30{
        margin-top: 30px;
    }
    .hosting .pricing:before {
        height: 60%;
    }
    .hosting .pricing .item h3 {
        padding-bottom: 15px;
    }
    .hosting .pricing .item p {
        padding-left: 0;
        padding-right: 0;
    }
    .hosting .pricing .item ul {
        padding-left: 0;
    }
    .hosting .pricing .item ul li .svg {
        margin-right: 10px;
    }
    .hosting .about h2 {
        font-size: 28px;
        line-height: 38px;
    }
    .hosting .about .padd-sm{
        padding-left: 15px !important;
    }
    .hosting .about .md-align{
        text-align: center;
    }
    .hosting .about .about-img{
        margin-bottom: 50px;
    }
    .hosting .about .about-shape {
        top: 48px;
        left: 75px;
        width: 45%;
    }
    .hosting .newsletter button {
        padding: 0 10px;
    }
    .hosting .newsletter form {
        margin-top: 50px;
    }
    .hosting .newsletter .input-field {
        padding-left: 10px;
        padding-right: 150px;
    }
    
    .hosting .client .quote{
        padding-top: 30px;
    }
    .hosting .client .hosting-client-slider{
        padding-bottom: 75px;
    }
    .hosting .client .lg-device{
        display: none;
    }
    .hosting .client .md-device{
        display: block;
    }
    .hosting .contact .form-part .inputs {
        margin-bottom: 20px;
    }
    .hosting .blog{
        padding-bottom: 80px;
    }
    .hosting .blog .mt-md-30{
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
    }
    .hosting .blog .mt-sm-30{
        margin-top: 30px;
    }
    .hosting .world .title p {
        padding: 0;
    }
    .hosting .world .map-part{
        display: none;
    }
    .hosting .contact .form-part{
        margin-top: 50px;
    }
    .hosting footer{
        background: #3C6FF7;
    }
    .hosting .top-footer{
        padding-bottom: 50px;
        padding-top: 135px;
    }
    .hosting .top-footer ul li p {
        line-height: 30px;
        display: inline;
    }
    .hosting .top-footer .pl-70 {
        padding-left: 0;
        padding-top: 30px;
    }
    .hosting .bottom-footer {
        height: 100%;
        padding: 10px 0;
    }
    /*========================== 34. Hosting page dark version ==========================*/
    .hosting-dark .newsletter .border {
        width: 96%;
    }
    .hosting-dark .contact .border {
        width: 96%;
    }
    .hosting-dark .header-menu #menu-button {
        color: #fff;
    }
    /*========================== 35. VPN landing page ==========================*/
    .vpn .title{
        margin-bottom: 40px;
    }
    .vpn .title h2 {
        font-size: 28px;
        line-height: 40px;
    }
    .vpn .menubar{
        padding: 20px 15px;
    }
    .vpn .menubar .navbar .navbar-brand img{
        width: 70%;
    }
    
    .vpn .menubar .btn-design{
        display: none;
    }
    .vpn .banner{
        padding: 60px 15px;
    }
    
    .vpn .banner .text h1 {
        font-size: 30px;
        line-height: 45px;
        padding-top: 30px;
    }
    
    .vpn .device .image img,
    .vpn .download .image img,
    .vpn .app .image img{
        width: 100%;
    }
    .vpn .device .image,
    .vpn .app .image,
    .vpn .download .image{
        padding-bottom: 30px;
    }
    .vpn .device1 .lg-device,
    .vpn .device3 .lg-device,
    .vpn .app .lg-device{
        display: none;
    }
    .vpn .device1 .md-device,
    .vpn .device3 .md-device,
    .vpn .app .md-device{
        display: block;
    }
    .vpn .device2 .image ,
    .vpn .download .image {
        margin-left: 0;
    }
    .vpn .feature .title p {
        padding: 0 70px;
    }
    .vpn .feature .mb-md-30{
        margin-bottom: 30px;
    }
    .vpn .app ul{
        display: block !important;
    }
    .vpn .app ul li{
        margin-bottom: 30px;
    }
    .vpn .app ul li:last-child{
        margin-bottom: 0;
    }
    .vpn .pricing .title p {
        padding: 0 50px;
    }
    .vpn .pricing .mt-md-30,
    .vpn .blog .mt-md-30{
        margin: auto;
        margin-top: 30px;
    }
    .vpn .pricing .item:hover {
        padding: 50px 0;
        margin-top: 0;
    }
    .vpn .faq .card {
        padding: 15px;
    }
    .vpn .faq .card .card-header .btn-link {
        padding: 0;
        white-space: normal;
        line-height: 30px;
        font-size: 14px;
    }
    .vpn .faq .card .card-header .btn-link i {
        margin-top: 3px;
    }
    .vpn .faq .card .card-body {
        padding: 0;
        padding-bottom: 20px;
    }
    .vpn .world .title p ,
    .vpn .pricing .title p ,
    .vpn .service .title p ,
    .vpn .feature .title p {
        padding: 0;
    }
    .vpn .world .image .overlay a {
        padding: 0 23px;
    }
    .vpn .blog .item .text h3, 
    .vpn .blog .item .overlay h3 {
        font-size: 20px;
    }
    .vpn .notification .bg{
        padding: 30px;
    }
    .vpn .notification .t-left{
        text-align: left !important;
        margin-top: 40px;
    }
    .vpn .notification h2 {
        font-size: 25px;
        line-height: 40px;
    }
    .vpn .top-footer {
        padding: 60px 0;
    }
    .vpn .top-footer .pl-70 {
        padding-left: 0;
        padding-top: 30px;
    }
    .vpn .bottom-footer{
        height: 100%;
        padding: 10px 0;
    }
    /*========================== 36. Blog page ==========================*/
    .blog-page .menubar {
        padding: 15px;
    }
    
    .blog-page .menubar .navbar .navbar-brand{
        width: 150px;
    }
    .blog-page .menubar .navbar .navbar-brand img{
        width: 100%;
    }
    
    .blog-page .banner .overlay {
        padding-top: 200px;
    }
    .blog-page .all-blogs{
        margin-top: 40px;
    }
    .blog-page .content{
        padding: 60px 0;
    }
    .blog-page .blog-item {
        padding-bottom: 40px;
    }
    .blog-page .blog-item h3 {
        font-size: 26px;
    }
    
    .blog-page .pages ul li a {
        height: 30px;
        width: 30px;
        line-height: 30px;
    }
    .blog-page .top-footer {
        padding: 60px 0;
    }
    
    .blog-page .top-footer .pl-70 {
        padding-left: 0;
        padding-top: 30px;
    }
    /*========================== 37. Single blog page ==========================*/
    
    .single-blog .blog-item .tags {
        display: block;
    }
    .single-blog .blog-item .tags .social{
        padding-top: 20px;
    }
    .single-blog .posts {
        display: block !important;
        padding: 20px;
    }
    .single-blog .posts .image {
        margin-right: 0;
        width: 100%;
        margin-bottom: 20px;
    }
    .single-blog .posts .text{
        width: 100%;
    }
    .single-blog .posts p {
        padding: 20px 0;
    }
    .single-blog .comment .single-comment .author-img {
        position: relative;
        top: 0;
        margin-bottom: 20px;
    }
    .single-blog .comment .single-comment .text {
        padding-left: 0;
    }
    .single-blog .comment .reply {
        padding-left: 0;
    }
    .single-blog .comment .reply .author-img {
        left: 0;
    }
    /*========================== 38. Contact page ==========================*/
    .contact-page .content .title h2 {
        font-size: 26px;
    }
}