/* ============================================================
      [Master Stylesheet]

 Theme Name: Xipper - App Landing HTML Template
 Theme URI: https://themeforest.net/user/pixelcurve/portfolio
 Description: Xipper - App Landing HTML Template
 Author: pixelcurve
 Author URI: 
 Version: 1.1
 
 main Font    : Open Sans 

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


/*
  ========================================
  Aos, Slick, 
  ========================================
*/

@import "aos.css";
@import "magnific-popup.css";
@import "owl.carousel.min.css";
@import "owl.theme.default.min.css";

/*
  ========================================
  Reset, Typography, Custom Animation 
  ========================================
*/

@import "reset.css";
@import "typography.css";
@import "custom-animation.css";

/*
  ========================================
        Css Style
        
  [1] Menu
  [2] Home 1
  [3] Home 2
  [4] Home 3
  [5] Home 4
  [6] blog
  [7] contact
  [8] footer 
  ========================================
*/

@import "menu.css";
@import "home_1.css";
@import "home_2.css";
@import "home_3.css";
@import "home_4.css";
@import "blog.css";
@import "contact.css";
@import "footer.css";

.wrapper {
    width: 100%;
    max-width: 1200px;
    margin: auto;
}
img {}
.header{
    padding-top: 10px;
}
.header .row1{
    background: rgba(255,255,255,0.5);
    height: 80px;
    border-radius: 10px;
}
.header .row1 .txt{
    line-height: 80px;
    padding: 0 30px;
    font-size: 36px;
    color: #fff;
    font-weight: bold;
}

.banner-txt{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px;
    color: #fff;
}
.banner-txt .txt1{
    font-size: 56px;
    font-weight: bold;
    line-height: 1em;
}
.banner-txt .txt2{
    font-size: 32px;
    padding: 10px;
}
.banner-txt .txt3{
    display: flex;
    align-items: center;
    background: #000;
    padding: 10px 40px;
    border-radius: 20px 20px 0 0;
    margin-top: 20px;
    background-image: linear-gradient(45deg, rgba(249,231,131),#f00, rgba(249,231,131));
    border: 1px solid #fff;
}
.banner-txt .txt3 img{}
.banner-txt .txt3 .txt3-1{
    margin-left: 15px;
}

.price-list{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px;
}
.price-list .price-item:hover{ transform: translateY(-15px);}
.price-list .price-item{
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    transition: all 0.5s;
}
.price-list .price-item .r1{
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    line-height: 2em;
}
.price-list .price-item .r2{
    text-align: center;
    color: #999;
    font-size: 14px;
}
.price-list .price-item .r3{
    text-align: center;
    margin-top: 30px;
    font-size: 20px;
    font-weight: bold;
    color: rgba(220,152,95);
}
.price-list .price-item .r3 span{
    font-size: 50px;
}
.price-list .price-item .r4{
    margin-top: 20px;
}
.price-list .price-item .r4 a{
    background: rgba(220,152,95);
    display: block;
    height: 60px;
    border-radius: 8px;
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-size: 24px;
    text-decoration: none;
}
.price-list .price-item .r4 a:hover { background: rgb(200,40,100);}
.price-list .price-item .r5{
    background: #fff;
    border-radius: 8px;
    margin-top: 20px;
    padding: 20px;
    line-height: 2em;
    min-height: 300px;
    box-sizing: border-box;
    font-size: 16px;
    background-image: linear-gradient(0deg, rgba(254,211,161), transparent);
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.price-list .price-item .r5 br{}
.price-list .price-item .r5 span{}


.video-block {
    min-height: 600px;
    background: url(//ainitu.oss-cn-shanghai.aliyuncs.com/pdf/img/video-bg.jpg) no-repeat center center;
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-block video {
    width: 595px;
    background: #fff;
    margin-top: -132px;
    height: 381px;
    border-radius: 10px;
}