body {font-family: "Open Sans", sans-serif; background:#faf7f7;}
 h1,h2,h3,h4,h5,h6{font-family: "Roboto", sans-serif; font-weight:700;}
 
 h2{font-size:36px; margin-bottom:15px;}
  h3{font-size:30px;}
 img{max-width:100%;}
 a{text-decoration:none; transition:.2s ease all;}
 ul, li{list-style:none; margin:0; padding:0;}
 
 .navbar{padding:15px 0;}
 .navbar-expand-lg .navbar-collapse{display:inline-block!important;}
 .navbar-nav{display:inline-flex!important;}
 
.nav-link{font-family: "Roboto", sans-serif; font-size:17px; text-transform:uppercase; font-weight:600; padding:10px 30px!important;}
.nav-link:hover{color:#e83666;}
.nav-link.btn{background:#e83666; color:#fff; border-radius:5px; border:1px solid #e83666!important;}

.navbar-brand img{width:80%;}
 
.hero {text-align: center; padding:100px 0; position:relative;}
.hero:before, .hero:after{background:url(../images/hero-left.png) no-repeat; position:absolute; width:131px; height:280px; top:11%; content:'';}
.hero:before{ left:0; }
.hero:after{right:0; transform:scaleX(-1);}
.hero h1 { font-weight: 800; color: #2b2226; font-size:54px;}
.hero p {max-width:51%; margin: 10px auto 25px; font-size:22px;}
.hero .btn-area{position:relative; z-index:2;}
.hero .btn-primary{margin-right:10px;}
.hero.inner{text-align:left; padding:0; position:relative;}
.hero.inner p{max-width:83%; margin:0;}
.hero.inner .content-area{padding:50px 0 25px;}
.hero.inner .fig-sec{ position:relative;} 
.hero.inner .fig-sec figure{width:378px; height:378px; border:15px solid #fff; border-radius:50%; position:absolute; right:0; z-index:1;}
.hero.inner .fig-sec figure:before{border:15px solid #faf7f7; content:''; border-radius:50%; display:block; height:352px; position:absolute; width:352px; left:-2px; top:-1px;}
.hero.inner .breadcrumb{margin-top:5em;}
.hero.inner .breadcrumb li a{color:#e83666; padding-right:30px; position:relative;}
.hero.inner .breadcrumb li a:after{content:"→"; position:absolute; right:7px; color:#333;}
.hero.inner .container-fluid{padding:0;}
.hero.inner .row{margin:0;}
.hero.inner .banner-img{position:absolute; right:0; text-align:right; z-index:1;}
.hero.inner .banner-img img{max-width:75%; }
.hero.inner .btn-primary{margin-top:2em;}

.btn-primary, .btn-outline-primary{font-size:18px; padding:12px 30px; border:2px solid #e83666; transition:.2s ease all;}
.btn-primary{background-color:#e83666; color:#fff; }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus-visible, .btn:hover{color:#e83666!important; border:1px solid #e83666!important; padding:12px 30px; background:transparent!important;}
.btn-outline-primary {color:#e83666;  background:transparent;}
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus-visible{background-color:#e83666!important; border:#e83666!important; color:#fff!important;}

.features{background:#fff; padding:70px 0;}
.features .card { border: 1px solid #e6e6e6; padding:20px; border-radius:0; }
.features .card figure{display:block; width:63px; height:70px;}
.category-section { display: none; background: #faf7f7; padding:70px 0;}
.category-section .card, .type-section .type-txt .type-block .card{background:transparent; position:relative; border:none; cursor:pointer; }
.category-section .card:hover figure, .type-section .type-txt .type-block .card:hover figure{background:#e83666;}
.category-section .card .btn:before, .type-section .type-txt .type-block .card .btn:before{transition: all 0.4s ease;}
.category-section .card:hover .btn:before, .type-section .type-txt .type-block .card:hover .btn:before{transform: rotate(-35deg);}

.category-section .btn{border:none; text-align:left; padding-left:50px; position:relative; color:#333; font-size:16px;}
.category-section .btn:hover{background:none!important; border:none!important; color:#333!important;}
.category-section .fig-section, .type-section .type-txt .type-block .fig-section{position:relative; margin-bottom:10px;}
.category-section .fig-section figure, .type-section .type-txt .type-block .fig-section figure{position:relative; width:86px; height:86px; background:#333; border-radius:50%; text-align:center; line-height:80px; }
.category-section .fig-section:before, .type-section .type-txt .type-block .fig-section:before{background:url(../images/dot.png) repeat-x; height:8px; content:''; position:absolute; left:0; width:100%; top:37%;}
.category-section .fig-section:after, .type-section .type-txt .type-block .fig-section:after{background:url(../images/icon.svg) no-repeat; height:8px; content:''; position:absolute; left:53.5%; width:21px; height:21px; top:32%;}
.category-section .btn:before, .type-section .type-txt .type-block .btn:before{width:35px; height:35px; border-radius:50%; content:"\f178"; background:#e83666; font-family:FontAwesome; color:#fff; position:absolute; text-align:center; line-height:35px; left:0; bottom:5px; }

.owl-dots {display:none;}
	
footer {background:#fff; padding:50px 0 0; color: #6b6769; }
footer .logo{margin-bottom:20px;}
footer .logo img{width:45%;}
footer h4{font-size:20px; font-weight:600; color:#e83666; margin-bottom:15px;}
footer li{margin-bottom:10px;}
footer li a{color:#333; font-size:16px;}
footer li a:hover{color:#e83666;}
footer .bottom{margin-top:2em; border-top:2px solid #faf7f7; padding:15px 0 0; font-size:14px;}
footer .bottom li{display:inline-block; margin-bottom:0;}
footer .bottom li a{padding:0 15px 0 0; font-size:14px;}
footer .right{text-align:right;}
footer .app{font-size:28px; color:#e83666; margin-right:10px; vertical-align:middle;}
footer .social li{display:inline-block;}
footer .social li a{color:#ccc; padding:0 7px;}
footer .social li a:hover{color:#e83666;}

.main{padding:80px 0; background:#fff; position:relative;}
.category .item{border:1px solid #ddd; text-align:center; padding:2em; width:100%; margin-bottom:25px;}
.category .item h5{line-height:22px; font-size:18px;}
.category .item a{color:#333;}
.category .item a:hover svg{fill:red;}
.category .col-md-3{display:flex; flex-wrap:wrap;}

.cat-box{flex-wrap:wrap;}
.cat-box .col-md-3{display:flex; flex-wrap:wrap;}
.cat-box .item{text-align:center; width:100%; margin-bottom:25px; height:330px; perspective:1000px;}
.cat-box .item.field{height:230px;}
.cat-box .item .flip-item-inner {position: relative; width: 100%; border:1px solid #ddd; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d;}
.cat-box .item a{color:#333;}
.cat-box .item a.link{color:#fe3265; display:block; margin-top:10px;}

.cat-box .item.enterprise{text-align:left;}
.cat-box .item.enterprise .flip-item-front, .cat-box .item.enterprise .flip-item-back{padding:1em;}
.cat-box .item.enterprise .flip-item-front{padding:1em 3em!important;}
.cat-box .item.enterprise .flip-item-back{align-items:flex-start; font-size:14px; text-align:left; justify-content:flex-start!important;}
.cat-box .item.enterprise .flip-item-back ul{display:block; width:100%;}
.cat-box .item.enterprise .flip-item-back li{text-align:left; position:relative; padding-left:15px;}
.cat-box .item.enterprise .flip-item-back li:before{width:7px; height:7px; background:#fff; border-radius:50%; position:absolute; left:0; content:''; top:8px;}
.cat-box .item .flip-item-back p{margin-bottom:10px;}

/* Do an horizontal flip when you move the mouse over the flip box container */
.cat-box .item:hover .flip-item-inner {transform: rotateY(180deg); }

/* Position the front and back side */
.cat-box .item .flip-item-front, .cat-box .item .flip-item-back {position: absolute; padding:2em;  width: 100%;  height: 100%;  backface-visibility: hidden; display:flex; justify-content:center; flex-direction:column; align-items:center;}

/* Style the front side (fallback if image is missing) */
.cat-box .item .flip-item-front {color: black;}

/* Style the back side */
.cat-box .item .flip-item-back {background-color:#fe3265; color: white; transform: rotateY(180deg);}
.cat-box .item .flip-item-back h5{margin-top:10px;}
.cat-box .item .flip-item-back button{display:block; background:#fff; color:#fe3265; position:absolute; width:92%; padding:8px; bottom:10px; border:1px solid #fff; font-size:15px;}
.cat-box .item .flip-item-back button:hover{background:transparent!important; color:#fff!important; border-color:#fff!important; }

.pro-section .item{border:1px solid #ddd; padding:10px; width:100%; margin-bottom:25px; font-size:14px; transition:.2s ease all;}
.pro-section .item:hover{box-shadow:0 0px 18px #999; border-radius:5px;}
.pro-section .item .head{position:relative;}
.pro-section .item b{display:block; font-size:18px; margin-bottom:10px;}
.pro-section .item small{font-size:14px; color:#999; display:block;}
.pro-section .item .head .rating{position:absolute; right:10px; top:0; background:url(../images/rate-bg.png); width:49px; height:53px; top:-10px; text-align:center; font-size:14px; padding-top:5px;}
.pro-section .item .head .rating i{color:#f6cf66; display:block;}
.pro-section .item .head img{border-radius:3px;}
.pro-section .item ul{margin-bottom:20px;}
.pro-section .item li{margin-bottom:8px; font-size:14px;}
.pro-section .item li img{width:;17px; height:17px; margin-right:5px;}
.pro-section .btn{background:#fe3265; color:#fff; border:1px solid #fe3265; text-align:center; padding:10px 0; border-radius:0; display:block; width:100%; font-size:16px;}
.pro-section .btn:hover{background:#fff; color:#fe3265;}

.modal.fade .modal-dialog {max-width:50%;}
.modal-content{border-radius:0; padding:1em;}
.modal-header{flex-direction:column; align-items:flex-start; border-bottom:0;}
.modal-title{text-align:left;}
.modal-header .btn-close{position:absolute; right:2em; background:url(../images/close.svg); width:5px; height:5px; }
.modal-content .sub{width:100%;}
.modal-body{padding-bottom:0;}
.modal-footer{border-top:0; padding-top:0;}
.form-control, .form-select{padding:15px; border-radius:2px;}
.form-select{margin-top:10px;}

.contact__form-wrap{background:#f5f5f5; border:1px solid #f5f5f5; padding:2em;}
.contact__info-item{border:1px solid #f5f5f5; padding:2em; margin-bottom:1em; position:relative; overflow:hidden;}
.contact__info-item .shape {position: absolute; right:0; bottom: -5px; color: #F4F5F8; z-index:0;}
.cta-section{background:#e83666; color:#fff; padding:2em 0;}
.cta-section ul{clear:both; margin-top:5px;}
.cta-section li{display:inline-block; padding:0 10px; font-size:24px;}
.cta-section li:first-child{padding-left:0;}
.cta-section a{color:#fff;}
.cta-section .channel{display:flex;align-items:center; justify-content:center;}
.cta-section .channel span{width:40px; float:left; display:flex; margin-right:15px;}
.cta-section .channel i{font-size:53px;}
.cta-section .channel a{width:82%; float:left;}

.type-section{background:#faf7f7; position:relative;}
.type-section .container-fluid, .type-section .col-md-7, .gr-section .container-fluid, .type-section .col-md-74{padding:0;}
.type-section .row, .gr-section .row{margin:0;}
.type-section .type-txt{padding:3em 7em 2em 2em; }
.type-section .type-txt .type-block{background:#fff; position:absolute; padding:3em; width:70%; right:0; top:40%;}

.benefit-section{padding:4em 0; overflow:hidden; background:#fff;}
.benefit-section ul{margin-top:2em;}
.benefit-section li{padding-left:15px; position:relative; margin-bottom:20px; font-size:20px;}
.benefit-section li:before{width:7px; height:7px; border-radius:50%; background:#e83666; position:absolute; left:0; top:13px; content:'';}

.gr-section{background:#faf7f7; position:relative;}
.gr-section .gr-txt-block{padding:3em;}
.gr-section .gr-txt-block p{font-size:18px; margin:10px 0 20px;}
.title{margin-bottom:20px;}

.pro-block{border-radius:5px; padding:1em; text-align:center; box-shadow:0 4px 10px #ddd; width:48%; float:left; margin:0 4% 4% 0; font-size:16px; font-weight:500; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.pro-block.odd{background:#fe3260; color:#fff; line-height:22px;}
.pro-block:nth-child(2), .pro-block:nth-child(4){margin-right:0;}
.pro-block figure{margin-bottom:5px;}

.list li{text-align:left; position:relative; padding-left:15px; margin-bottom:15px;}
.list li:before{width:7px; height:7px; background:#fe3265; border-radius:50%; position:absolute; left:0; content:''; top:8px;}
.zw-table {border-radius: 5px; box-shadow: 0 0 2px 0 #d6e1e8; margin: 1.5em 0;  width: 100%;}
.zw-table td {padding: 10px 15px; line-height: 20px; border-right: 1px solid #d6e1e8; border-bottom: 1px solid #d6e1e8;}
.zw-table th {background:#fe3265; color: #fff; padding: 10px 15px; font-weight: 500; font-size: 15px;}
.zw-table a{color:#fe3265;}

.or-list{margin:0; list-style: none;  counter-reset: my-counter; padding:0;}
  .or-list li{position:relative; padding-left:25px; margin-bottom:20px;}
.or-list li::before {position:absolute; left:0;
  counter-increment: my-counter; /* Increment 'my-counter' for each list item */
  content: " " counter(my-counter); margin-right: 5px;}
  
 .or-list li ul{ counter-reset:none;}
  .or-list li li:before{content:"none" }


@media (max-width:1200px) {
	.hero h1{font-size:40px;}
	.hero p{font-size:20px;}
}

@media (max-width:1024px) {
	.cat-box .item.enterprise .flip-item-front{padding:1em 2em!important;}
	.cat-box .item .flip-item-back h5{font-size:18px;}
	.cat-box .item .flip-item-back p{margin-bottom:10px;}
	.cat-box .item .flip-item-back button{font-size:14px; padding:6px;}
	
}

@media (max-width: 992px) {
	.hero h1{font-size:34px;}
	.hero.inner .banner-img img {max-width:51%;}
	.navbar-nav {display:inline-block !important;}
	.offcanvas-collapse.open { visibility:visible;  transform:translateX(100%);}
	.offcanvas-collapse.text-end{text-align:left!important;}
	 .offcanvas-collapse {position:fixed; top:0;  bottom: 0; left:-80%; width:80%; padding-right: 1rem; padding-left: 1rem; overflow-y: auto; visibility: hidden; background-color: #343a40; transition: transform 0.3s ease-in-out, visibility 0.3s 
ease-in-out; z-index:3;}
.nav-link{color:#fff!important;}
.hero.inner .fig-sec figure{width:300px; height:300px;}
.hero.inner .fig-sec figure:before{width:275px; height:275px; left:-2px; top:-2px;}
}

@media (max-width:767px) {
	h2{font-size:30px;}
	h3{font-size:26px;}
	.navbar-nav {display:block !important; padding-top:10px;}
	.nav-link{font-size:15px; padding:7px 0!important;}
	.hero{padding:30px 0 60px 0;}
	.hero h1{font-size:34px;}
	.hero p{max-width:98%; font-size:16px; margin:10px 20px 25px;}
	.hero .btn-primary, .btn-outline-primary{width:45%; padding:12px 20px; font-size:16px;}
	footer .col-md-3{margin-bottom:15px;}
	footer .bottom ul{text-align:center;}
	footer .bottom li a{padding:0 5px 10px;}
	footer .right{text-align:center; margin-top:10px;}
	.category-section .card{text-align:center;}
	.category-section .fig-section:before{top:52%;}
	.category-section .fig-section:after{content:none;}
	.category-section .fig-section figure{margin:auto;}
	.category-section .btn{text-align:center; padding-left:0; width:100%;}
	.category-section .btn:before{left:29%;}
	footer .logo img {width: 30%;}
	.hero.inner .fig-sec{margin-bottom:70px;}
	.hero.inner .fig-sec figure{position:relative; width:350px; height:350px; margin:auto;}
	.hero.inner .fig-sec figure:before{width:330px; height:330px; top:-5px; left:-5px;}
	.hero.inner .banner-img{position:relative; text-align:center; margin-bottom:3em;}
	.hero.inner .breadcrumb{position:absolute; bottom:0; }
	.hero.inner .content-area{text-align:center;}
	.hero.inner .content-area p{max-width:100%; margin-top:15px;}
	.modal.fade .modal-dialog{max-width:95%;}
	.modal-content{padding:.5em;}
	.hero.inner .content-area{padding:30px 0 25px;}
	.hero.inner .btn-primary{width:auto; padding:12px 30px;}
	.form-control, .form-select{padding:10px;}
	.cta-section{text-align:center;}
	.cta-section .channel{margin:1em auto; width:60%;}
	.cta-section .channel a{text-align:left;}
	.cta-section ul{text-align:center;}
	.pro-block{margin:4% 4% 0 0;}
	.type-section .type-txt{padding:3em 1em 2em 1em;}
	.type-section .type-txt .type-block{width:100%; padding:2em; text-align:center; position:relative; margin-top:2em;}
	.type-section .type-txt .type-block .fig-section{text-align:center;}
	.type-section .type-txt .type-block .fig-section figure{margin:0 auto 1em;}
	.type-section .type-txt .type-block .fig-section:before, .type-section .type-txt .type-block .fig-section:after {content:none;}
}

@media (max-width:480px) {
	.category-section .btn:before{left:19%;}
	.cta-section .channel{width:80%;}
	.pro-block{min-height:140px;}
	.benefit-section ul{margin:1.5em 0 2em;}
	.benefit-section li{font-size:16px; margin-bottom:10px;}
	.benefit-section li:before{top:9px;}
	.gr-section .gr-txt-block{text-align:center; padding:2em 1em 3em;}
	.hero.inner .banner-img img {max-width: 75%;}
}