/* --------------------------
:: Template Name: Mobile apps Landing Page
:: Template Author: webfancy99
:: Template Author URI: https://www.behance.net/webfancy99
:: Description: Bizzone is a One Page Business Landing Template. It's very clean, creative & beautiful. It's super responsive & ultra light.
:: Version: v1.0
:: Created: 11/05/2020  MM/DD/YYYY
-------------------------- */


/* ----------------------
[Table of contents]
01.Common CSS
02.Banner and menu area CSS
    02.1.Menu area
    02.2.Banner area
03.App Feature CSS
04.About CSS
05.Screenshot CSS
06.Pricing CSS
07.Our team  CSS
08.FAQ CSS
09.Blog CSS
10.Contact Us
11.Footer
12.Responsive CSS

13.Download  CSS
14.Blog CSS
16.Contact Us
17.Company Info CSS
18.Footer CSS
19.Proloader CSS
 --------------------------*/

/*Google font link*/
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800;900&display=swap');

/*-------:: 1.common css Start-------*/
*{
    padding: 0;
    margin: 0;
    font-family: 'Nunito', sans-serif;
    text-decoration: none;
    list-style: none;
    color: #fffefc;
}
html {
    scroll-behavior: smooth;
}
body{
    background-color: #191d28;
}
a{
    text-decoration: none;
}
a:hover{
    text-decoration: none;
    color: black;
}
ul,li{
    list-style: none;
    padding: 0;
    margin: 0;
}
.text-color{
    color: #f0073c !important;
}
::-moz-selection { /* Code for Firefox */
    background: #cc0a3c;
    color: #fff;
}

::selection {
    background: #cc0a3c;
    color: #fff;
}
/*common css end*/
/*============================*/

/*-----:: 2.banner and menu area-----*/
.menu-area{
    box-shadow: 0 0 10px 0 #000;
    margin-bottom: 10px;
}

#navbarNav{
    position: absolute;
    right: 0;
}
.navbar-light .navbar-brand {
    width: 200px;
}
.nav-link {
    color: white !important;
    font-weight: 800;
    padding: 7px 15px !important;
    transition: all linear .3s;
    position: relative;
    text-transform: uppercase;
    font-size: 13px;
}
.nav-link:after{
    position: absolute;
    content: "";
    height: 2px;
    width: 0;
    background-color: #f1083f;
    bottom: 0;
    left: 11px;
    transition: all linear .4s;
}
.nav-link:hover{
    color: #f1083f !important;
}
.nav-link:hover.nav-link:after{
    position: absolute;
    content: "";
    height: 2px;
    width: 80%;
    background-color: #f1083f;
    bottom: 0;
    left: 11px;
}
.join-us-btn{
    color: white !important;
    font-weight: 800;
    transition: all linear .3s;
    position: relative;
    text-transform: uppercase;
    background: #f1083f;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #f1083f, #d31027);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #f1083f, #D31027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    padding: 7px 28px !important;
    border-radius: 28px;
}
.join-us-btn:hover{
    color: #fff !important;
}
.banner-heading{
    font-weight: 900;
    font-size: 47px;
    line-height: 70px;
    margin-top: 85px;
}
.banner-text{
    font-weight: 600;
    line-height: 32px;
    font-size: 16px;
    margin: 36px 0;
}
.logo-text{
    font-weight: 900;
    font-size: 47px;
    color:white
}
.banner-btn ul li a{
    border: 2px solid #cc0a3c;
    padding: 10px 30px;
    font-size: 15px;
    font-weight: 800;
    border-radius: 8px;
    color: #fffefc;
}
.banner-btn ul li .btn1{
    background-color: #cc0a3c;

}
.banner-btn ul li .btn2{
    border: 2px solid #cc0a3c;
    color: #cc0a3c;
    margin-left: 15px;
}
.banner-btn ul li .btn2 i{
    color: #cc0a3c;

}
.banner-area{
    padding: 60px 0 100px 0;
}


/*<!--:: 3.app features area-->*/
#Features{
    padding: 0 0 100px 0;
}
.section-heading{
    font-weight: 800;
    font-size: 45px;
}
.section-text{
    font-weight: 600;
    line-height: 32px;
    font-size: 16px;
}
.feature-content-area{
    padding: 70px 0 0 0;
}

.feature-row{
    margin-bottom: 64px;
}
.feature-row li img{
    max-width: 55px;
    margin-right: 32px;
}
.feature-title{
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 10px 0;
    cursor: pointer;
    transition: all linear .3s;
}
.feature-title:hover{
    color: #cc0a3c;
}
.feature-text{
    font-weight: 600;
    line-height: 26px;
    font-size: 16px;
}
.download-option1 a ul,
.download-option2 a ul{
    background-color: #cc0a3c;
    padding: 10px 10px;
    border-radius: 8px;
}
.download-option1 a ul li ,
.download-option2 a ul li{
    background-color: #cc0a3c;
    font-weight: 600;
    line-height: 20px;
    font-size: 16px;
}
.download-option2{
    margin-left: 20px;
}
.download-option1 a ul li i,
.download-option2 a ul li i{
    color: #fff !important;
    margin-right: 15px;
    font-size: 40px;
    background-color: #cc0a3c;
}
/*<!--app features area END-->*/




/*<!--:: 4.about  area -->*/
#about{
    padding-bottom: 100px;
}
.about-img{
    width: 500px;
    margin-left: 35px;
}
/*<!--about  area END-->*/

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

/*<!--:: 5.Screenshot area-->*/
#Screenshots{
    padding: 100px 0;
}
.screenshots-area .owl-carousel .owl-nav{
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}
.screenshots-area .owl-carousel .owl-nav button{
    font-size: 69px !important;
    margin: 0 19px;
}
.screenshots-area .owl-carousel .owl-nav button span:hover{
    color: #cc0a3c;
}
/*<!--Screenshot area END-->*/

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

/*-----:: 6.Pricing area start-----:: 3*/
#pricing-plan{
    padding: 50px 0 100px 0;
}
.pricing-table{
    border: 2px solid #cc0a3c;
    border-radius: 8px;
    margin: 0 30px;
    padding:0 0 30px 0;
    transition: all linear .5s;
}
.pricing-header{
    background-image: url("../images/background.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 104px 0;
    transition: all linear .5s;
}
.price-list-content li{
    font-weight: 600;
    margin: 7px 0;
}
.pricing-table:hover .pricing-header{
    filter: hue-rotate(180deg);
    -webkit-filter: hue-rotate(180deg);
    background-image: url("../images/background.svg");
}
.purchase-btn{
    margin-top: 15px;
    padding: 10px 30px;
    font-size: 15px;
    font-weight: 800;
    border-radius: 8px;
    color: #fffefc;
    border: 2px solid #f1083f;
}
.purchase-btn:hover{
    background-color: #f1083f;
    color: #fffefc;
}
/*-----:: 6.Pricing area End-----:: 3*/

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

/*<!--:: 7.Our team area-->*/
.team-member{
    padding: 100px 0;
    border-radius: 18px;
    box-shadow: 0 3px 22px #0000005c;
    transition: all linear .3s;
}
.team-member:hover{
    background-color: #1e222d;
}
.team-member-img{
    border: 2px solid #f1083f;
    border-radius: 57px;
}
.member-name{
    font-size: 26px;
    font-weight: 800;
    margin-top: 30px;
}
.team-member:hover .member-name{
    color: #f1083f;
}
.member-post{
    font-weight: 600;
    font-size: 17px;
}
.team-member:hover .member-post{
    color: #f1083f;
}
.social-media{
    margin-left: 110px;
    margin-top: 25px;
}

.social-media li{
    margin: 0 13px;
}
.social-media li a i:hover{
    color:#f1083f ;
}
.testimonial-area{
    padding: 100px 0;
}
.clint-area{
    box-shadow: 0 3px 22px #0000005c;
    background-color: #1e222d;
    border-radius: 16px;
    padding: 14px;
    margin-left: 12px;
}
.clint-img{
    border-radius: 57px;
}
.clint-name{
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 5px 0;
}
.clint-post{
    font-size: 13px;
    margin: 0;
}
.multiple-items .slick-dots{
    display: flex;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    margin-top: 24px;
}
.multiple-items .slick-dots li button{
    font-size: 0;
    border: none;
}
.multiple-items .slick-dots li{
    height: 10px;
    width: 10px;
    border:1px solid #f1083f;
    margin: 0 5px;
    border-radius: 10px;
}
.multiple-items .slick-dots .slick-active{
    height: 10px;
    width: 10px;
    background-color: #f1083f;
    margin: 0 5px;
    border-radius: 10px;
}
/*<!--Our team area end-->*/

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

/*<!--:: 8.faq area -->*/
#Faq{
    padding: 100px 0;
}
.panel{
    margin-top: 25px;
    box-shadow: 0 3px 22px #0000005c;
    background-color: #1e222d;
    border-radius: 10px;

}
.panel-heading{
    padding: 7px 0 7px 20px;
}
.panel-title a{
    color: #f1083f;
    font-weight: 800;
    font-size: 18px;
}
.panel-body{
    padding: 20px;
}
/*<!--faq area END-->*/

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

/*-----:: 9.Blog area start -----*/
#blog-area{
    padding: 70px 0;
}
.blog-are-content{
    padding-top: 50px;
}
.post-card{
    position: relative;
    overflow: hidden;
    box-shadow: 0 3px 22px #0000005c;
    border-radius: 8px;
    margin:10px 0 ;
    padding: 0 0 15px 0;
}
.post-card::after{
    position: absolute;
    content: "30";
    height: 35px;
    width: 50px;
    background-color: #f70840cf;
    top: 20px;
    left: 20px;
    display: inline-block;
    color: white;
    text-align: center;
    font-size: 25px;
    transition: all linear .3s;

}
.post-card::before{
    position: absolute;
    content: "sep";
    height: 35px;
    width: 50px;
    background-color: #f1083f;
    display: inline-block;
    z-index: 99;
    top: 55px;
    left: 20px;
    color: #d0d0d0;
    text-align: center;
    transition: all linear .3s;

}
.post-image{
    position: relative;
    cursor: pointer;
    transition: all linear .3s;

}
.post-card:hover .post-image{
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    -webkit-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
}
.overlay4{
    position: absolute;
    top: 0;
    background-color: #111111;
    height: 25.5%;
    width: 50%;
    opacity: 0;
    transition: all linear .3s;
}

.post-heading{
    margin-top: 30px;
    font-size: 25px;
    font-weight: 900;
    color:#fffefc;
    transition: all linear .3s;
    display: inline-block;
}
.post-heading:hover{
    color: #f1083f;
}
.post-text{
    margin-top: 30px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: #8c8c8c;
    margin-bottom: 20px;

}
.read-more {
    display: inline-block;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: #f1083f;
}
.read-more:hover{
    color: #f1083f;

}
/*blog area end*/

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

/*-----:: 10.contact area-----*/
#Contact{
    padding: 100px 0;
}
.contact-form{
    padding: 50px 10px;
    margin-top: -200px;
    z-index: 9999;
    position: relative;
    border-radius: 22px;
    background-color:  #191d28;
    box-shadow: 0 3px 22px #0000005c;

}
.form-control{
    background-color: transparent;
    border:2px solid #46495a;
    margin: 15px;
}
.send-us{
    margin: 43px 0 20px 1px;
}
.send-us a{
    border: 2px solid #cc0a3c;
    padding: 10px 30px;
    font-size: 15px;
    font-weight: 800;
    border-radius: 8px;
    color: #fffefc;
    background-color: #cc0a3c;
}
.contact-area{
    padding: 0 80px;
}
.contact-area li i{
    color: #cc0a3c;
    font-size: 35px;
    margin-top: 10px;
}
.contact-area li p{
    font-size: 15px;
    color: #fff;
    margin: 10px 0;
    font-weight: 600;
}
/*contact area END*/

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

 /*-----:: 11.Footer CSS Start-----*/
#footer{
    background-image: url("../images/bg-footer.png");
    background-repeat: no-repeat;
    background-position: bottom;
    position: relative;
    padding: 100px;
}
.footer-logo img{
    width: 200px;
}
.footer-heading{
    text-transform: capitalize;
    font-weight: 800;
    position: relative;
    margin-bottom: 32px;
    color: #f1083f;
}
.footer-heading::after {
    content: "___ __ _ ";
    position: absolute;
    color: #f1083f;
    bottom: -15px;
    left: 0;
    font-size: 30px;
    font-weight: 800;
}
.footer-text{
    font-size: 15px;
    color: #525252;
}
.contact-information ul{
    display: inline-block;
    padding: 0;
    margin-top: 20px;
}
.contact-information ul li{
    font-size: 15px;
    color: #fff;
    margin: 10px 0;
    font-weight: 600;
}
.contact-information ul li i{
    margin-right: 10px;
    width: 20px;
    color: #f1083f;
}
.social-media-share{
    margin-top: 30px;
}
.social-media-share ul{
    margin: 0;
    padding: 0;
}
.social-media-share ul li{
    display: inline-block;
    margin: 3px 6px 3px 6px;
}
.social-media-share ul li a{
    display: inline-block;
    background: #f1083f;
    color: #FFF;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 4px;
}
.social-media-share ul li a i{
    color: #FFF;
    text-align: center;
    line-height: 30px;
}.social-media-share ul li a i:hover{
     color: #FFF;
     text-align: center;
     line-height: 30px;
 }
.information-link ul li{
    padding: 5px 0 5px 20px;
}
.information-link ul li a i{
    color: #ccc;
    font-size: 15px;
    margin-right: 8px;
}
.information-link ul li a{
    font-size: 15px;
    color: #525252;
    font-weight: 600;
    transition: all linear .3s;
}
.information-link ul li a:hover{
    color: #f1083f;
}
.information-link ul li a i:hover{
    color: #f1083f;
    font-size: 15px;
}
.footer-bottom{
    margin-top: 50px;
    padding: 85px 0 80px;
    border-top: 1px solid #ebebeb;
}
.copyright-area{
    font-size: 16px;
    color: #666;
}
.copyright-area a strong{
    color: #f1083f;
}

 /*Footer CSS eND*/

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

/*-----:: 12.responsive area-----*/
@media screen and (max-width: 1200px){
     #footer{
         background-size: contain;
     }
}
@media screen and (max-width: 1024px){

}
@media screen and (max-width: 900px){
    .navbar-light .navbar-toggler-icon {
        background-color: #f1083f;
    }
    #navbarNav {
        position: absolute;
        right: 0;
        background-color: #191d28;
        box-shadow: 0 3px 22px #d60f295c;
        top: 62px;
        z-index: 99;
    }
    #navbarNav .navbar-nav li{
        margin: 6px 0;
    }
    .banner-area {
        padding: 12px 0 100px 0;
    }
    .banner-heading{
        margin-top: 0;
    }
    .banner-img{
        margin-top: 50px;
    }
    .feature-content-area .col-lg-5{
        margin-top: 110px;
    }
    .pricing-area .col-lg-4{
        max-width: 360px;
    }
    .pricing-area .col-lg-4:nth-child(3){
        margin: 0 auto;
    }
    .pricing-area .col-lg-4:nth-child(3){
        margin-top: 65px;
    }
    .our-team-area .col-lg-4{
        max-width: 360px;
    }
    .our-team-area .col-lg-4:nth-child(3){
        margin: 0 auto;
    }
    .our-team-area .col-lg-4:nth-child(3){
        margin-top: 65px;
    }
    .blog-are-content .col-lg-4{
        max-width: 360px;
    }
    .blog-are-content .col-lg-4:nth-child(3){
        margin: 0 auto;
    }
    .blog-are-content .col-lg-4:nth-child(3){
        margin-top: 65px;
    }
    .insta-photo .row .col-lg-4 {
        max-width: 86px;
    }
}
@media screen and (max-width: 768px){

}
@media screen and (max-width: 600px){
    .banner-heading {
        font-size: 42px;
    }
    .pricing-area .col-lg-4 {
        margin:0 auto;
    }
    .pricing-area .col-lg-4 {
        margin-top:15px;
    }
    .pricing-area .col-lg-4:nth-child(3){
        margin: 0 auto;
    }
    .pricing-area .col-lg-4:nth-child(3){
        margin-top:15px;
    }
    .our-team-area .col-lg-4 {
        margin:0 auto;
    }
    .our-team-area .col-lg-4 {
        margin-top:15px;
    }
    .our-team-area .col-lg-4:nth-child(3){
        margin: 0 auto;
    }
    .our-team-area .col-lg-4:nth-child(3){
        margin-top:15px;
    }
    .blog-are-content .col-lg-4 {
        margin:0 auto;
    }
    .blog-are-content .col-lg-4 {
        margin-top:15px;
    }
    .blog-are-content .col-lg-4:nth-child(3){
        margin: 0 auto;
    }
    .blog-are-content .col-lg-4:nth-child(3){
        margin-top:15px;
    }
    .payment-card{
        margin: 50px 0 0 1px;
        float: left !important;
    }
}
@media screen and (max-width: 480px){
    .banner-heading {
        font-size: 38px;
        line-height: 49px;
    }
}
@media screen and (max-width: 320px) {
    .banner-heading {
        font-size: 25px;
        line-height: 40px;
    }

    .banner-text {
        font-weight: 600;
        line-height: 23px;
        font-size: 13px;
        margin: 36px 0;
    }
    .banner-btn ul li a {
        border: 2px solid #cc0a3c;
        padding: 10px 22px;
        font-size: 13px;
    }
    .section-heading {
        font-weight: 800;
        font-size: 40px;
    }
    .section-text {
        font-weight: 600;
        line-height: 24px;
        font-size: 13px;
    }
    .feature-title {
        font-size: 22px;
    }
    .feature-text {
        font-weight: 600;
        line-height: 22px;
        font-size: 14px;
    }
    .download-option1 a ul li, .download-option2 a ul li {
        background-color: #cc0a3c;
        font-weight: 600;
        line-height: 20px;
        font-size: 14px;
    }
    .download-option1 a ul li i, .download-option2 a ul li i {
        margin-right: 11px;
        font-size: 35px;
    }
    .panel-title a {
        font-size: 15px;
    }
    .panel-body {
        padding: 20px;
        font-size: 13px;
    }

    #footer{
        padding: 0 0 0 10px;
    }
}


.section-heading {
        font-size: 2.5rem; /* 增大标题字体 */
        font-weight: bold;
    }

    .section-text {
        font-size: 1.25rem; /* 增加正文描述的字体大小 */
        line-height: 1.6; /* 提升可读性 */
    }

    .feature-list li {
        font-size: 1.2rem; /* 增大功能列表项字体 */
        margin-bottom: 10px; /* 增加列表项的间距 */
        line-height: 1.5; /* 提高可读性 */
    }

    .download-option ul li {
        font-size: 1.2rem; /* 下载选项的字体大小 */
    }