body{background: #ffffff;font-family: 'Century Gothic', sans-serif; font-weight: 300; font-size: 18px; position: relative; width: 100%; height: 100%; overflow-x: hidden;}
.btn-primary{ background-color: var(--theme-color); border-color: var(--theme-color);}
.front-theme{height: 333px;margin: auto;padding: 2px;border-color: var(--theme-color);border-width: 1px;border-style: solid;border-radius: 3px;}
.front-theme-btn{margin-top: 4px;margin-bottom: 4px;}
.front-feature-icon{color: var(--theme-color);font-size: 60px;}
.dropdown-item{margin-left: 5px;color: #666;}
.dropdown-item.active{color: var(--theme-color);}
.navbar-logo{height:70px;}
.features h2{margin-bottom: 40px;}
.mt-25{margin-top: 25px;}
.tm-white a {color: #fff;}
/* start h1 group */
h1 {margin-top: 0;margin-bottom: 25px;}
h1,h2,h3,h4{font-weight: bold;}
/* end h1 group */
p { line-height: 1.6em; font-size:16px; }
/* img */
img{max-width: 100%;height: auto;}
/* img */
/* overlay */
.overlay{width: 100%;height: 100%;background: rgba(0, 0, 0, 0.0);padding-top: 39px;padding-bottom: 49px;}  
/* over lay */
/* start page container */
@media (min-width: 768px) {
  .container {width: 700px;}
  
}
@media (min-width: 992px) {
  .container {width: 900px;}
}
@media (min-width: 1200px) {
  .container {width: 1000px;}
}
/* end page container */

/* start preloader */
.preloader
    {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 99999;display: -webkit-flex;display: -ms-flexbox;display: flex;
        -webkit-flex-flow: row nowrap;-ms-flex-flow: row nowrap;flex-flow: row nowrap;
        /*justify-content: center;*/
        -webkit-align-items: center;-ms-flex-align: center;align-items: center;background: none repeat scroll 0 0 #fff;
    }
.sk-spinner-rotating-plane.sk-spinner 
    {width: 30px;height: 30px;background-color: var(--theme-color);margin: 0 auto;-webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out;animation: sk-rotatePlane 1.2s infinite ease-in-out;}
@-webkit-keyframes sk-rotatePlane {
  0% {-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
  50% {-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
  100% {-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
@keyframes sk-rotatePlane {
  0% {-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
  50% {-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
  100% {-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
/* end preloader */
/* start navigation */
.navbar-default{background: #fff;border: none;box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.08);margin: 0!important; height:100px}
.navbar-default .navbar-brand{color: var(--theme-color);font-size: 30px;font-weight: bold;height: 70px;line-height: 35px;}
.navbar-default .nav li a{color: #666;font-size: 13px;font-weight: bold;height: 70px;line-height: 40px;margin-top:15px}
.navbar-default .nav li a:hover,.navbar-default .nav li a:focus,.navbar-default .nav li a.current{color: var(--theme-color);}
.navbar-default .navbar-toggle{border: none;padding-top: 20px;}
.navbar-default .navbar-toggle .icon-bar{background: var(--theme-color);border-color: transparent;}
.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus { background-color:#ffffff}
@media (max-width: 767px) {
.navbar-nav {background: white;width: 150px;height: 400px; z-index: 899;position: fixed;right: 12px;}
.navbar-collapse {border:none;}
}
/* end navigation */
/* start home */       
#home{/*background: url(../../one/img/home-bg.jpg) no-repeat;*/ background-size: cover;color: #000000;margin-top:100px;text-align: center;width: 100%;padding-top:50px;padding-bottom:50px}
#home p{font-weight: 400;font-style: italic;line-height: 2em;}
#home img{display: inline-block;margin-top: 30px;}
@media (max-width: 767px) {
.wowMainPg {text-align: center !important; padding-top:0px !important; position:relative; top:-20px}
.mainText {text-align: center !important; padding-top:0px !important; line-height: 1.4 !important}
.firstBtn {width:41%;}
.img1{display:none !important;}
}
/* end home */
/* start demo */
#demo{text-align: center;padding-top:50px;padding-bottom:50px;}
#demo .fa{color: var(--theme-color);font-size: 60px;}
#demo h3{font-size: 20px;}
/* end demo */
/* start divider */
#divider{text-align: center;padding-top:39px;padding-bottom: 49px; background-color:#0c316b}
#divider .fa{color: var(--theme-color); font-size: 60px;}
#divider h3{font-size: 20px; color:#ffffff}
/* end divider */

/*Aboutdreamz*/
/*mobile view */
@media (max-width:768px) {
.dreamzabout-box{
border: 2px solid var(--theme-color);
border-radius: 10px;
padding: 10px !important;
position:relative;
top:-40px;
}
#aboutdreamz{
margin-top:0px !important;
padding:10px;
}
}
/* Apply the highlight effect to the <h1> tag when hovered */
h1:hover mark {
  -webkit-animation: highlight 1.5s forwards;
  animation: highlight 1.5s forwards;
  background-color: none;
  background: linear-gradient(90deg, #287aa1 50%, rgba(255, 255, 255, 0) 50%);
  background-size: 200% 100%;
  color:white;
  z-index: -1;
  background-position: 100% 0;
}

@-webkit-keyframes highlight {
  to {
    background-position: 0 0;
  }
}

@keyframes highlight {
  to {
    background-position: 0 0;
  }
}
#aboutdreamz{padding-top:50px;padding-bottom:50px}
.dreamzabout-box{background-color:#ffffff; padding:5px;} 
#servicedreamz{background-color:#ffffff; padding-top:50px;padding-bottom:50px}
/* start feature */
@media (max-width:768px){
.front-theme{ border-radius:20px !important; width:275px !important; height:auto !important;}
}
#feature{background: #f8f8f8;padding-top:50px;padding-bottom:50px; color:#ffffff}
#feature p{padding-top: 10px; color:#ffffff; text-align:justify}
#feature span{float: left;}
#feature .fa{background: var(--theme-color);border-radius: 50%;color: #fff;display: inline-block;width: 40px;height: 40px;line-height: 40px;text-align: center;margin-right: 20px;}
/* end feature */
/* start feature1 */
#feature1{padding-top:50px;padding-bottom:50px;}
#feature1 p{padding-top: 10px;}
#feature1 span{float: left;}
#feature1 .fa{background: var(--theme-color);border-radius: 50%;color: #fff;display: inline-block;width: 40px;height: 40px;line-height: 40px;text-align: center;margin-right: 20px;}
/* end feature1 */

/*whyVcard*/
@media (max-width: 767px) {
    .downrow{
        margin-top:-5px !important;
    }
    .whyCard{
	line-height:1.5 !important;
  }
    .Boxes{
	margin: 5px !important;
  }
  }
#whyvcard{background-color:#ffffff;margin:0px; padding:70px 0px 70px 0px;text-align:center}
.whyvcard-title{color:#000000;font-weight: bold;padding:10px; text-align:center;text-style:uppercase}
.wvcard-box{border:1px solid #123e7f; width:100%; height:200px;background-color:#ffffff; box-shadow: 4px 0px 14px -10px rgba(203,203,203,0.71);
-webkit-box-shadow: 4px 0px 14px -10px rgba(203,203,203,0.71);
-moz-box-shadow: 4px 0px 14px -10px rgba(203,203,203,0.71); border-radius:5px; padding:10px; valign:middle}

/* start pricing */

#pricing{background: #ffffff;text-align: center;padding-top: 39px;padding-bottom: 49px;}
#pricing h2{padding-bottom: 49px;}
#pricing .pricing{background: #fff;}
#pricing .active{position: relative;bottom: 20px;}
#pricing .pricing .pricing-title{background: var(--theme-color);color: #fff;font-weight: bold;padding: 30px;}
#pricing .pricing .pricing-title p{font-size: 20px;}
#pricing .pricing ul{padding: 0;margin: 0;}
#pricing .pricing ul li{display: block;list-style: none;padding: 9px; background-color:#f7f7f7;border: 1px solid #2957A5}
#pricing .modules{font-size:13px;font-weight: 500; text-align:left;padding:5px 0px 5px 20px}
#pricing .pricing .btn{border-radius: 0px;color: #ffffff;font-weight: bold;padding-right: 40px;padding-left: 40px;margin-top: 20px;margin-bottom: 30px;transition: all 0.3s ease;border-radius:5px}
#pricing .pricing .btn:hover {background: var(--theme-color);color: #fff;}
/* end pricing */

/* start download */
#download
    {padding-top: 39px;padding-bottom: 49px;}
#download h2
    {padding-bottom: 20px;}
#download .btn{border-radius: 0px;font-weight: bold;margin-top: 20px;padding: 10px 40px 10px 40px;}
/* end download */
/* start contact */
#contact
    {color: #fff;}
#contact h2
    {padding-bottom: 10px;}
#contact address
    {padding-top: 20px;}
#contact address .fa
    {background: var(--theme-color);border-radius: 50%;width: 40px;height: 40px;line-height: 40px;text-align: center;margin-top: 6px;margin-right: 10px;}
#contact .contact-form
    {padding-top: 20px;}
#contact .form-control
    {border: none;border-radius: 0px;box-shadow: none;margin-bottom: 20px;}
#contact input
    {height: 50px;}
#contact input[type="submit"]
    {background: var(--theme-color);color: #fff;font-weight: bold;transition: all 0.3s ease;}
#contact input[type="submit"]:hover {background: #107DB6;}
/* end contact */
/* start footer */
footer
    {background: #023864;font-weight: 400;text-align: center;padding: 20px;}
/* end footer */

@media screen and ( max-width: 991px ) {
    .templatemo-box {margin-bottom: 30px;}
    #pricing .active {bottom: 0;}
    .pricing {margin-bottom: 20px;}
    #feature img, #download img {margin-top: 30px;}
    #feature1 img {margin-bottom: 30px;}
}
@media screen and ( max-width: 767px ) {
    .navbar-default .nav li a {height: auto;line-height: 2em;}
    #feature, #pricing, #download {padding-top: 20px;padding-bottom: 40px;}
    #contact .overlay {padding-top: 20px;}
}
/* start media 360 */
@media screen and ( max-width: 360px ){
    .pricing{padding-bottom: 40px;}
}
/* end media 360 */

/*go back button */
.goBackBtn{
    border: none;
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 25px;
    margin-bottom: 8px;
    border-radius: 4px;
    color: #00000085;
    margin-left: 775px;
}
@media (max-width: 767px) {
.goBackBtn{
    border: none;
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 25px;
    margin-right: 15px;
    margin-bottom: 8px;
    border-radius: 4px;
    margin-left: 0px !important;
    color: #00000085;
}
}