:root{
 /* font-family */
 --primary_font:'Futura Hv BT';
 --secondary_font:'ClashDisplay';
 --footer_links_font:'Tomato Grotesk';

 /* font-size */
 --h1:66px;
 --h2:42px;
 --h3:22px;
 --h4:20px;
 --body:16px;

 /* font-weight */
 --regular:400;
 --semi_bold:500;

 /* line-height */
 --h1_line_height:79.12px;
 --h2_line_height:55px;
 --h3_line_height:35px;
 --h4_line_height:30px;

 /* color-variants */
 --orange:rgba(254, 94, 0, 1);
 --violet-blue:rgba(6, 26, 41, 1);
 --zinc-black:rgba(30, 30, 30, 1);
 --grey:rgba(85, 85, 85, 1);

 /* content-padding */
 --padding-y:120px 0;
 --padding-top:120px 0 0;
 --padding-bottom:0 0 120px;

 /* content-margin */
 --margin-top:120px 0 0;
}
/* typography */
h1{font-family: var(--primary_font) !important; font-size: var(--h1) !important; line-height: var(--h1_line_height) !important; font-weight: var(--regular) !important; color: #000 !important;}
h2{font-family: var(--primary_font) !important; font-size: var(--h2) !important; line-height: var(--h2_line_height) !important; font-weight: var(--regular) !important; color: #000 !important;}
h3{font-family: var(--primary_font) !important; font-size: var(--h3) !important; line-height: var(--h3_line_height) !important; font-weight: var(--regular) !important; color: #000 !important;}
h4{font-family: var(--primary_font) !important; font-size: var(--h4) !important; line-height: var(--h4_line_height) !important; font-weight: var(--regular) !important; color: #000 !important;}

*{margin: 0; padding: 0; box-sizing: border-box;font-family: var(--primary_font);}
html,body{margin: 0; padding: 0; position: relative;}
ul,ol{list-style: none; padding: 0 !important; margin: 0 !important;}
a{text-decoration: none !important; display: inline-block; text-transform: capitalize;}
p{line-height: 30px !important; font-weight: 300;}
main{background: url('/newmoban/_external/demo.mobanwang.com/mb/lo202601/202601053/html/images/main-bg.png'); background-size:cover;}
/* main {background:linear-gradient(129deg, rgba(223,232,232,0.4) 0%, rgba(235,206,209,0.4) 50%, rgba(191,217,230,0.4) 100%); width: 100%; height: 100%;} */

.container{width: 100%; max-width: 1350px !important;}
.row > * {padding: 0 15px !important;}
.py{padding: var(--padding-y);}
.pt{padding: var(--padding-top);}
.pb{padding: var(--padding-bottom);}
.mt{margin: var(--margin-top);}
.white-theme-btn{padding: 15px 30px; box-shadow: var(--zinc-black) 5px 5px; font-weight: var(--semi_bold) !important; border: 1px solid var(--zinc-black); border-radius: 50px; cursor: pointer;}
.white-theme-btn:hover{background-color: var(--orange);}
.white-theme-btn:hover a{color: #fff;}
.white-theme-btn:hover svg path{fill: #fff;}
.orange-theme-btn{padding:15px 30px; box-shadow: var(--zinc-black) 5px 5px; font-weight: var(--semi_bold) !important; background-color: var(--orange); border: 1px solid var(--zinc-black); border-radius: 50px; cursor: pointer;}
.white-theme-btn a{color: var(--zinc-black); font-family: var(--secondary_font) !important;}
.orange-theme-btn a{color: #fff; font-family: var(--secondary_font) !important;}
.orange-theme-btn svg path{fill: #fff;}
.orange-theme-btn:hover{background-color: #fff;}
.orange-theme-btn:hover a{color: var(--zinc-black);}
.orange-theme-btn:hover svg path{fill: var(--zinc-black);}
.prefix{color: var(--orange); text-transform: uppercase; margin-bottom: 10px;}
.prefix span{line-height: 30px !important; letter-spacing:3.2px; font-family: var(--secondary_font) !important; font-size: var(--body); display: block; font-weight: var(--semi_bold) !important;}
.background{width: 100%; height:max-content; background-image: url('/newmoban/_external/demo.mobanwang.com/mb/lo202601/202601053/html/images/background.jpg'); position: relative;}
.background::before{content: ''; position: absolute; top: 0; left: 0; width: 100px; height: 100%; border-right: 1px solid rgba(223, 223, 223, 1);}
.background::after{content: ''; position: absolute; top: 0; right: 0; width: 100px; height: 100%; border-left: 1px solid rgba(223, 223, 223, 1);}
body .scroll-btn{position: absolute; top: calc(928px - 210px); right: 8px; z-index: 999;}

@media (width < 1500px){
  body .scroll-btn{display: none;}
}
/* media query */
@media (max-width:1399px){
 :root{
 /* font-size */
 --h1:60px;
 --h2:38px;
 --h3:22px;
 --h4:20px;
 --body:16px;
  
 /* line-height */
 --h1_line_height:71.12px;
 --h2_line_height:46px;
 --h3_line_height:35px;
 --h4_line_height:30px;

 /* content-padding */
 --padding-y:100px 0;
 --padding-top:100px 0 0;
 --padding-bottom:0 0 100px;
 }
 .background::after,.background::before{display: none; }
}
@media (max-width:1199px){
 :root{
  /* font-size */
  --h1:46px;
  --h2:37px;
  --h3:22px;
  --h4:20px;
  --body:16px;
 
  /* line-height */
  --h1_line_height:57.12px;
  --h2_line_height:45px;
  --h3_line_height:35px;
  --h4_line_height:30px;
  }
}
@media (max-width:991px){
 :root{
  /* font-size */
  --h1:36px;
  --h2:34px;
  --h3:18px;
  --h4:20px;
  --body:16px;
 
  /* line-height */
  --h1_line_height:46.12px;
  --h2_line_height:40px;
  --h3_line_height:22px;
  --h4_line_height:30px;
 
  /* content-padding */
  --padding-y:70px 0;
  --padding-top:70px 0 0;
  --padding-bottom:0 0 70px;
  }
}
@media (max-width:768px){
 :root{
  /* font-size */
  --h1:28px;
  --h2:34px;
  --h3:18px;
  --h4:20px;
  --body:16px;
 
  /* line-height */
  --h1_line_height:29.12px;
  --h2_line_height:40px;
  --h3_line_height:22px;
  --h4_line_height:30px;
  }
}
@media (max-width:767px){
 :root{
  /* font-size */
  --h1:28px;
  --h2:26px;
  --h3:18px;
  --h4:20px;
  --body:16px;
 
  /* line-height */
  --h1_line_height:29.12px;
  --h2_line_height:40px;
  --h3_line_height:22px;
  --h4_line_height:30px;
 
  /* content-padding */
  --padding-y:50px 0;
  --padding-top:50px 0 0;
  --padding-bottom:0 0 50px;
  }
}
@media (max-width:575px){
  :root{
    /* font-size */
    --h1:26px;
    --h2:26px;
    --h3:18px;
    --h4:20px;
    --body:16px;
   
    /* line-height */
    --h1_line_height:29.12px;
    --h2_line_height:34px;
    --h3_line_height:22px;
    --h4_line_height:30px;
   
    /* content-padding */
    --padding-y:50px 0;
    --padding-top:50px 0 0;
    --padding-bottom:0 0 50px;
    }
}


/* 
Today i worked on:
~BrandVista 
  #Ads production - Done
  #Contact page - Done
  #Responsive - Done
*/