/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body{font-family:"Barlow",sans-serif;color:#798487;background:url("../img/main-bg.jpg") repeat 0 0;padding:0;margin:0}
h1,h2,h3,h4,h5,h6{float:left;width:100%;margin:0;padding:0}
.50topmarg { margin-top: 50px;}
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;overflow:hidden;background:#fff}
#preloader:before{content:"";position:fixed;top:calc(50% - 30px);left:calc(50% - 30px);border:6px solid #ed502e;border-top-color:white;border-radius:50%;width:60px;height:60px;animation:animate-preloader 1s linear infinite}
@keyframes animate-preloader{0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top{position:fixed;visibility:hidden;opacity:0;right:15px;bottom:15px;z-index:996;background:#ed502e;width:40px;height:40px;border-radius:4px;transition:all 0.4s}
.back-to-top i{font-size:28px;color:#fff;line-height:0}
.back-to-top:hover{background:#f06f54;color:#fff}
.back-to-top.active{visibility:visible;opacity:1}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header{transition:all 0.5s;z-index:997;padding:20px 0}
#header.header-scrolled{padding:12px 0;box-shadow:0px 2px 15px rgba(0,0,0,0.1);background:#fff}
#header .logo{font-size:26px;margin:0;padding:0;line-height:1;font-weight:700;letter-spacing:0.5px;text-transform:uppercase}
#header .logo a{color:#0b2341}
#header .logo img{}
@media only screen and (min-width:768px) and (max-width: 991px) {
#header { background: #fff; opacity: 0.9;}
}

@media only screen and (min-width:320px) and (max-width: 767px) {
#header { background: #fff; opacity: 0.9;}
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar{padding:0}
.navbar ul{margin:0;padding:0;display:flex;list-style:none;align-items:center}
.navbar li{position:relative; /*padding:10px 15px;*/ padding:0px 15px;}
.navbar a,.navbar a:focus{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px 0;font-size:17px;color:#0b2341;white-space:nowrap;transition:0.3s;font-weight:500}
.navbar a i,.navbar a:focus i{font-size:12px;line-height:0;margin-left:5px}
.navbar a:hover,.navbar .active,.navbar .active:focus,.navbar li:hover > a{color:#b12a77;border-bottom:2px solid #b12a77}
.navbar .active{color:#b12a77;border-bottom:2px solid #b12a77}
.navbar .getstarted,.navbar .getstarted:focus{background:#ed502e;padding:8px 20px;margin-left:30px;border-radius:4px;color:#fff}
.navbar .getstarted:hover,.navbar .getstarted:focus:hover{color:#fff;background:#ef6445}
.navbar .dropdown ul{display:block;position:absolute;left:14px;top:calc(100% + 30px);margin:0;padding:10px 0;z-index:99;opacity:0;visibility:hidden;background:#fff;box-shadow:0px 0px 30px rgba(127,137,161,0.25);transition:0.3s}
.navbar .dropdown ul li{min-width:200px}
.navbar .dropdown ul a{padding:10px 20px;text-transform:none}
.navbar .dropdown ul a i{font-size:12px}
.navbar .dropdown ul a:hover,.navbar .dropdown ul .active:hover,.navbar .dropdown ul li:hover > a{color:#ed502e}
.navbar .dropdown:hover > ul{opacity:1;top:100%;visibility:visible}
.navbar .dropdown .dropdown ul{top:0;left:calc(100% - 30px);visibility:hidden}
.navbar .dropdown .dropdown:hover > ul{opacity:1;top:0;left:100%;visibility:visible}
@media (max-width:1366px){
.navbar .dropdown .dropdown ul{left:-90%}
.navbar .dropdown .dropdown:hover > ul{left:-100%}
}
/**
* Mobile Navigation 
*/
.mobile-nav-toggle{color:#0b2341;font-size:28px;cursor:pointer;display:none;line-height:0;transition:0.5s}
.mobile-nav-toggle.bi-x{color:#fff}
@media (max-width:991px){
.mobile-nav-toggle{display:block}
.navbar ul{display:none}
}
.navbar-mobile{position:fixed;overflow:hidden;top:0;right:0;left:0;bottom:0;background:rgba(4,12,21,0.9);transition:0.3s;z-index:999}
.navbar-mobile .mobile-nav-toggle{position:absolute;top:15px;right:15px}
.navbar-mobile ul{display:block;position:absolute;top:55px;right:15px;bottom:15px;left:15px;padding:10px 0;background-color:#fff;overflow-y:auto;transition:0.3s}
.navbar-mobile a,.navbar-mobile a:focus{padding:10px 20px;font-size:15px;color:#0b2341}
.navbar-mobile a:hover,.navbar-mobile .active,.navbar-mobile li:hover > a{color:#ed502e}
.navbar-mobile .getstarted,.navbar-mobile .getstarted:focus{margin:15px}
.navbar-mobile .dropdown ul{position:static;display:none;margin:10px 20px;padding:10px 0;z-index:99;opacity:1;visibility:visible;background:#fff;box-shadow:0px 0px 30px rgba(127,137,161,0.25)}
.navbar-mobile .dropdown ul li{min-width:200px}
.navbar-mobile .dropdown ul a{padding:10px 20px}
.navbar-mobile .dropdown ul a i{font-size:12px}
.navbar-mobile .dropdown ul a:hover,.navbar-mobile .dropdown ul .active:hover,.navbar-mobile .dropdown ul li:hover > a{color:#ed502e}
.navbar-mobile .dropdown > .dropdown-active{display:block}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero{width:100%;height:100vh;overflow:hidden;position:relative}
#hero .carousel,#hero .carousel-inner,#hero .carousel-item,#hero .carousel-item::before{position:absolute;top:35px;right:0;left:0;bottom:0}
#hero .carousel-item{background-size:auto;background-position:top right;background-repeat:no-repeat}
#hero .carousel-item::before{content:""}
#hero .carousel-container{align-items:center;position:absolute;bottom:0;top:82px;left:50px;right:50px}
#hero h2{color:#000;margin:0;font-size:50px;font-weight:600}
#hero h2 span{font-size:70px;font-weight:800}
#hero p{animation-delay:0.4s;color:#000;font-size:20px;margin-top:10px;font-weight:400}

@media (min-width:1200px){
#hero p{width:37%}
}
#hero .carousel-inner .carousel-item{transition-property:opacity;background-position:right top}
#hero .carousel-inner .carousel-item,#hero .carousel-inner .active.carousel-item-start,#hero .carousel-inner .active.carousel-item-end{opacity:0}
#hero .carousel-inner .active,#hero .carousel-inner .carousel-item-next.carousel-item-start,#hero .carousel-inner .carousel-item-prev.carousel-item-end{opacity:1;transition:0.5s}
#hero .carousel-inner .carousel-item-next,#hero .carousel-inner .carousel-item-prev,#hero .carousel-inner .active.carousel-item-start,#hero .carousel-inner .active.carousel-item-end{left:0;transform:translate3d(0,0,0)}
#hero .carousel-control-next-icon,#hero .carousel-control-prev-icon{background:none;font-size:30px;line-height:0;width:auto;height:auto;background:rgba(255,255,255,0.2);border-radius:50px;transition:0.3s;color:rgba(255,255,255,0.5);width:54px;height:54px;display:flex;align-items:center;justify-content:center}
#hero .carousel-control-next-icon:hover,#hero .carousel-control-prev-icon:hover{background:rgba(255,255,255,0.3);color:rgba(255,255,255,0.8)}
#hero .carousel-indicators li{list-style-type:none;cursor:pointer;background:#685ddb;overflow:hidden;border:0;width:10px;height:10px;border-radius:50px;opacity:1;transition:0.3s;border:1px solid #685ddb;margin:0 3px;padding:1px;box-sizing:content-box}
#hero .carousel-indicators li.active{background-color:#685ddb;position:relative;border:1px solid rgba(0,0,0,.25);border-radius:10px;width:22px}
#hero .btn-get-started{font-weight:300;font-size:20px;display:inline-block;padding:14px 32px;border-radius:4px;transition:0.5s;line-height:1;color:#fff;animation-delay:0.8s;background:#2a905e;margin-top:15px;text-decoration:none}
#hero .btn-get-started:hover{background:#1b7d4d}
@media (max-width:992px){
#hero{height:100vh}
#hero .carousel-container{text-align:center;top:74px}
}
@media (max-width:768px){
#hero h2{font-size:30px}
}
@media (min-width:1024px){
#hero .carousel-control-prev,#hero .carousel-control-next{width:5%}
}
@media (max-height:500px){
#hero{height:120vh}
}

@media only screen and (min-width:320px) and (max-width: 480px) {   
#hero .carousel-container { left: 15px; right: 15px;}	
#hero h2 span { font-size: 30px; font-weight: 800;}		
}

.framework-area{float:left;width:100%;margin:25px 0}
.framework-area h1{color:#e2af06;font-size:65px;opacity:0.5;line-height:60px;font-weight:800}
.feature-area{float:right;width:80%;padding:0px 0 70px 0}
.feature-area a{font-size:17px;color:#3a3462;font-weight:600;border-bottom:2px solid #fd7157;display:block;width:150px;margin:0 auto;padding:0 0 10px 0}
.feature-area .section-header{}
.feature-area .feature-wrap{}
.feature-area .feature-item{box-sizing:content-box;/* padding:15px;margin:30px 10px;*/position:relative;display:inline-block}
.feature-area .feature-item .feature-img{width:90px;border-radius:50px;margin-right:15px}
.feature-area .feature-item h3{font-size:20px;line-height:30px;font-weight:600;margin:0px 0 30px 0;color:#ffd05b}
.feature-area .feature-item h4{font-size:14px;color:#fff;margin:0}
.feature-area .feature-item p{color:#fff;font-size:15px;font-weight:300;line-height:23px;margin-bottom:30px}
.feature-area .feature-item a{color:#fb9448;font-size:17px;font-weight:400;margin:0;border:none;width:auto}
.feature-area .swiper-pagination{margin-top:0;position:relative}
.feature-area .swiper-pagination .swiper-pagination-bullet{width:12px;height:12px;background-color:rgba(0,0,0,0.2);opacity:1}
.feature-area .swiper-pagination .swiper-pagination-bullet-active{background-color:var(--color-primary)}
.feature-area .arrow-area{width:115px;position:relative;float:right;margin:25px 0}
@media (max-width:767px){
.section-header h2{margin-top:30px}
.feature-area{padding:0;width:100%}
.feature-area .feature-wrap{padding-left:0}
.feature-area .feature-item{padding:20px;margin:15px}
.feature-area .feature-item .feature-img{position:static;left:auto}
.feature-area .feature-item h3{margin:0 0 10px 0;float:left;width:100%}
.feature-area .feature-item p{float:left;width:100%;font-size:14px;margin-bottom:15px;font-weight:400}
.feature-area .feature-item a{}
}

/*--------------------------------------------------------------
# Our Clients
--------------------------------------------------------------*/
.section-title{}
.section-title h1{color:#e2af06;font-size:65px;opacity:0.5;line-height:60px;font-weight:800}
.section-title h2{color:#e2af06;font-size:65px;opacity:0.5;line-height:60px;font-weight:800}
.section-title p{margin-bottom:0;font-size:14px;color:#919191;visibility:hidden}
.clients .swiper-slide img{transition:0.3s}
.clients .swiper-slide img:hover{opacity:1}
.clients .swiper-pagination{margin-top:20px;position:relative}
.clients .swiper-pagination .swiper-pagination-bullet{width:12px;height:12px;background-color:#fff;opacity:1;border:1px solid #5cb874;display:none}
.clients .swiper-pagination .swiper-pagination-bullet-active{background-color:#5cb874}
.clients .arrow-area{width:115px;position:relative;float:right;margin:25px 0}
@media (max-width:768px){
.section-title h2{font-size:45px}
.section-title h2 br{display:none}
}
@media only screen and (min-width:320px) and (max-width: 480px) {  
.section-title h2 {font-size: 33px; line-height: 36px; margin-bottom: 20px;}
.section-title p { display: none;}
}

/* Technology Css --------------------- */
.technology-area{float:left;width:100%;background:url("../img/left-bg.png") no-repeat 0 0}
.technology-area h2{float:left;width:100%;color:#b12a77;opacity:0.4;font-size:40px;font-weight:800;line-height:45px}
.technology-area h2 span{font-size:30px}
.technology-area p{float:left;width:90%;font-size:16px;line-height:22px;margin:20px 0 25px 0}
.technology-area .icon-box{padding:30px;box-shadow:0px 10px 50px rgba(0,0,0,0.1);border-radius:10px;transition:all 0.3s ease-out 0s;background-color:#fff;float:left;width:100%}
.technology-area .icon-box img{display:inline-flex;align-items:center;justify-content:center;margin-bottom:24px;transition:all 0.4s ease-out 0s}
.technology-area .icon-box h3{margin-bottom:10px;font-size:18px;font-weight:600;color:#ff733f}
@media (max-width:768px){
.technology-area p{width:100%;margin-bottom:20px;text-align:justify}
.technology-area .icon-box img{margin-bottom:15px;margin-right:30px}
.technology-area .icon-box h3 br{display:none}
.technology-area .icon-box{padding:20px;text-align:center}
.technology-area .icon-box h3{display:inline-block}
.technology-area{padding:50px 15px 0px 15px}
}

/* Techno Startup Css --------------------- */
.techno-startup-area{float:left;width:100%;background:url("../img/right-bg.png") no-repeat right 0;padding:65px 0 0 0}
.techno-startup-area img { width:100%;}
.techno-startup-area h2{float:left;width:100%;color:#2a915f;opacity:0.4;font-size:40px;font-weight:800;line-height:45px}
.techno-startup-area h2 span{font-size:30px;text-transform:uppercase}
.techno-startup-area p{float:left;width:90%;font-size:16px;line-height:22px;margin:20px 0 25px 0}
.techno-startup-area a{float:left;border:1px solid #b12a77;color:#b12a77;padding:10px 16px;border-radius:3px;text-transform:uppercase;font-size:12px;text-decoration:none;font-weight:600}
@media (max-width:1199px){
.techno-startup-area { padding: 65px 0 65px 0;}	
}

@media (max-width:768px){
.techno-startup-area { padding: 65px 0 65px 0;}	
}

/* Services Css --------------------- */
.hm-serv-area{width:100%;background:url("../img/home-serv-bg.png") no-repeat 0 bottom;position:relative;padding:0 0 50px 0}
.hm-serv-area h3{float:left;width:100%;color:#373c65;text-transform:uppercase;font-size:20px;margin:0 0 23px 0;font-weight:700}
.hm-serv-area p{margin-bottom:35px}
.hm-serv-area img{width:100%}
.hm-serv-area .hm-serv-area-carousel,.hm-serv-area .hm-serv-area-slider{overflow:hidden}
.hm-serv-area .hm-serv-item{box-sizing:content-box;padding:20px;background:#fff;border-radius:7px;box-shadow:0px 6px 15px rgba(0,0,0,0.1);float:left}
.hm-serv-area .hm-serv-item img{width:55px;height:55px;margin:0 0 10px 0}
.hm-serv-area .hm-serv-item p{font-style:italic;font-size:13px;color:#4c4b4b;line-height:16px;display:inline-block;margin:0}
.hm-serv-area .hm-serv-item h6{color:#000;font-size:18px;font-weight:700;margin:0 0 10px 0}
.hm-serv-area .swiper-pagination{margin-top:20px;position:relative;text-align:right}
.hm-serv-area .swiper-pagination .swiper-pagination-bullet{width:10px;background-color:#685ddb;opacity:1;border:1px solid #685ddb;height:10px;margin:0 3px;padding:1px;box-sizing:content-box}
.hm-serv-area .swiper-pagination .swiper-pagination-bullet-active{background-color:#685ddb;position:relative;border:1px solid rgba(0,0,0,.25);border-radius:10px;width:22px}
@media (max-width:768px){
.hm-serv-area { }	
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials{padding:125px 0;background:url("../img/testi-bg.jpg") no-repeat;background-position:center center;background-size:cover;position:relative}
.testimonials .section-header{margin-bottom:40px}
.testimonials .testimonials-carousel,.testimonials .testimonials-slider{overflow:hidden;color:#fff}
.testimonials .testimonials-slider h2{float:left;width:100%;font-size:40px}
.testimonials .testimonials-slider h4{float:left;width:100%;font-size:30px}
.testimonials .testimonial-item{text-align:left;color:#fff}
.testimonials .testimonial-item h3{font-size:22px;font-weight:500;margin:10px 0 5px 0;color:#fff}
.testimonials .testimonial-item h4{font-size:18px;color:#fff;margin:0 0 15px 0;font-weight:300}
.testimonials .testimonial-item h4 span{font-size:16px}
.testimonials .testimonial-item .stars{float:left;width:100%}
.testimonials .testimonial-item .stars i{color:yellow;margin:0 1px}
.testimonials .testimonial-item p{margin:0 0 50px 0;font-size:18px;line-height:20px;font-weight:300}
@media (min-width:992px){
.testimonials .testimonial-item p{width:70%}
}

/* COMMON CSS -------------------- */
footer{float:left;width:100%}
.footer-area-bottom{font-size:18px;font-weight:500;padding:25px 0; border-top: 1px dashed #cacaca;}
.copyright>p{margin-bottom:0;color:#000}
.copyright a,.credits a{color:#b12a77;text-decoration:none}
.credits{padding-top:5px;text-align:center;color:#000} 

/* INNER BANNER --- */
.inner-banner-area { float: left; width: 100%;}
.inner-banner-area .bannertitle { position: relative; float: left; width: 100%;}
.inner-banner-area .bannertitle h1{ position: absolute; top: 200px; left: 100px; width: auto; font-weight: 800; font-size: 200px; color: #ddd; z-index: -1;}
.inner-banner-area img { width: 100%; margin: 0px 0 25px 0; }
.inner-banner-area img.zeromargin { margin-bottom: 0;}
@media only screen and (min-width:768px) and (max-width: 991px) { 
.inner-banner-area	{ margin-top: 60px; }
.inner-banner-area .bannertitle h1 {position: absolute; top: 120px; left: 100px; width: auto; font-weight: 800; font-size: 50px; color: #ddd; z-index: -1;}
}
@media only screen and (min-width:601px) and (max-width: 767px) { 
.inner-banner-area	{ margin-top: 60px; }
.inner-banner-area .bannertitle h1 {position: absolute; top: 120px; left: 100px; width: auto; font-weight: 800; font-size: 50px; color: #ddd; z-index: -1;}
}
@media only screen and (min-width:481px) and (max-width: 600px) { 
.inner-banner-area	{ margin-top: 110px; }
.inner-banner-area .bannertitle h1 {position: absolute; top: 0px; left: 15px; width: auto; font-weight: 800; font-size: 40px; color: #ddd; z-index: -1;}
}

@media only screen and (min-width:320px) and (max-width: 480px) { 
.inner-banner-area	{ margin-top: 110px; }
.inner-banner-area .bannertitle h1 {position: absolute; top: 0px; left: 15px; width: auto; font-weight: 800; font-size: 40px; color: #ddd; z-index: -1;}
}

/* ANIMATED INNER BANNER PAGE CSS ======================= -- */
#service-banner {width: 100%; height: 100%; margin-top: 70px; }
.topmargin{ /*margin-top: 100px !important; */ margin-top: 85px; }
#service-banner h1 { font-size: 200px; line-height: 170px; text-align: left; left: 50px;}
#service-banner .animated {animation: up-down 2s ease-in-out infinite alternate-reverse both;}

@media only screen and (min-width:992px) and (max-width: 1024px) { 
 #service-banner h1 {font-size: 100px; line-height: 90px; text-align: left; left: 50px;}
}

@media (min-width: 1024px) {
#service-banner {background-attachment: fixed;}	
/*#service-banner h1 {
   font-size: 100px;
    line-height: 90px;
    text-align: left;
    left: 50px;
  }*/	
}

@media (max-width: 991px) {
#service-banner {height: auto;}	
#service-banner h1 {font-size: 77px; line-height: 70px; text-align: left; left: 50px;}
#service-banner .animated {/* animation: none;*/}
#service-banner .serv-img {text-align: center;}
#service-banner .serv-img img {/*width: 50%;*/}
}

@media (max-width: 768px) {
#service-banner {/* margin-top: 20px;*/}
#service-banner h1 {font-size: 77px; line-height: 70px; text-align: left; left: 50px;}
#service-banner .serv-img img {/*width: 70%;*/}
}

@media (max-width: 575px) {
#service-banner .serv-img img {/*width: 80%;*/ }
}

@keyframes up-down {
0% {
   transform: translateY(10px);
}

100% {
   transform: translateY(-10px);
}
}
@media only screen and (min-width:992px) and (max-width: 1199px) { 
	#service-banner h1 {font-size: 110px; line-height: 120px;}
	.inner-banner-area .bannertitle h1 {top: 100px;}
}

@media only screen and (min-width:601px) and (max-width: 767px) { 
#service-banner h1 {font-size: 60px; line-height: 50px;}
	.inner-banner-area .bannertitle h1 {top: 100px;}
}

@media only screen and (min-width:481px) and (max-width: 600px) { 
#service-banner h1 {font-size: 40px; line-height: 30px;}
	.inner-banner-area .bannertitle h1 {top: 50px;}
}

@media only screen and (min-width:320px) and (max-width: 480px) { 
#service-banner h1 {font-size: 40px; line-height: 30px;}
	.inner-banner-area .bannertitle h1 {top: 50px;}
}

/* ABOUT US PAGE CSS ======================= -- */
.abt-bg-area { background: url("../img/abt-pg-bg.png") no-repeat right 0; float: left; width: 100%; text-align: center; margin-top: 50px;}
.abt-bg-area h6 {float: left; width: 100%; text-transform: uppercase; color: #b12a77; font-size: 20px;}
.abt-bg-area h1 {float: left; width: 100%; font-weight: 800; color: #000; font-size: 70px;}
.abt-bg-area p { float: left; width: 100%; font-size: 18px; font-weight: 300; line-height: normal; margin: 25px 0 0 0; }
.abt-bg-area .workflowbg { float: left; width: 100%; text-align: left; margin: 100px 0; box-shadow: 0px 2px 15px rgba(0,0,0,0.1); background: #fff; opacity: 0.6;}
.abt-bg-area .workflowbg img { }
.why-startup-area {float: left; width: 100%; text-align: center;}
.why-startup-area h2 {float: left; width: 100%; font-size: 70px; font-weight: 700; color: #000;}
.magicicon {position: relative; }
.magicicon img {position: absolute; right:0;}
.why-startup-area .startbox {float: left; width: 100%; background: #f1fbfb; border-radius: 24px; padding: 25px;  align-items: center; height: 30vh;  justify-content: space-between; margin: 15px 0; border: 1px solid #e7f2f2;}
.why-startup-area .startbox img {position:relative; margin: 0 auto 20px auto; width: 93px; height: 101px; }
.why-startup-area .startbox h3 { float: left; width: 100%; color: #292929; font-size: 20px; font-weight: 600; }


@media only screen and (min-width:768px) and (max-width: 991px) {
.abt-bg-area h1 {font-size: 50px;}
.why-startup-area h2 {font-size: 45px;}
.magicicon img {position: relative; right:0;}
}

@media only screen and (min-width:601px) and (max-width: 767px) { 
.abt-bg-area h1 {font-size: 50px;}
.abt-bg-area .workflowbg {margin: 50px 0;}
.magicicon img {position: relative; right:0;}
}

@media only screen and (min-width:481px) and (max-width: 600px) { 
.abt-bg-area h1 {font-size: 30px;}
.abt-bg-area .workflowbg {margin: 50px 0;}
.magicicon img {position: relative; right:0;}
.why-startup-area h2 {font-size: 50px; }
}

@media only screen and (min-width:320px) and (max-width: 480px) { 
.abt-bg-area h1 {font-size: 30px;}
.abt-bg-area .workflowbg {margin: 50px 0;}
.magicicon img {position: relative; right:0;}
.why-startup-area h2 {font-size: 50px; }
}

/* SERVICES PAGE CSS ======================= -- */
.service-pg-area { float: left; width: 100%; margin-top: 50px;}
.service-pg-area h1 {float: left; width: 100%; font-weight: 300; color: #000; font-size: 55px; margin-bottom: 60px; }
.service-pg-area h2 {float: left; width: 100%; font-weight: 800; color: #000; font-size: 60px; margin-bottom: 15px; text-transform: uppercase;}
.service-pg-area h2 span {float: left; width: auto; color: #b12a77; font-size: 85px;}
.service-pg-area p { float: left; width: 100%; font-size: 20px; font-weight: 300; line-height: 25px; margin: 0px 0 70px 0; }
.service-pg-area .dottedcircle{ position: relative;}
.service-pg-area .dottedcircle img { position: absolute; top:-130px; left: -106px;}

#serv-animated-object {
/*
  width: 100%;
  height: 100%;
  margin-top: 70px;
*/
}
#serv-animated-object .animated {
  animation: up-down 3s ease-in-out infinite alternate-reverse both; 	
}
.whatweoffer-area { float: left; width:100%; margin-bottom: 50px;}
.whatweoffer-area h4 {float: left; width:100%; color: #222; font-size: 30px; margin-bottom: 25px; font-weight: 300; }
.whatweoffer-area .servbox { background: #fff; border-radius: 5px; padding: 25px; box-shadow: 1px 1px 5px rgba(0,0,0,0.1); float: left; width:100%; height: 100%; }
.whatweoffer-area .servbox:hover { border-bottom: 1px solid #ed4a6e; }
.whatweoffer-area .servbox h5 {float: left; width:100%; color:#e2af06; opacity: 0.5; font-size: 35px; font-weight: 600; line-height: 35px; border-bottom: 1px dashed #666; padding:  0 0 15px 0; margin: 0 0 15px 0;}
.whatweoffer-area .servbox p {float: left; width:100%; color: #000; font-size: 18px; line-height: normal; height: 20vh;}
.whatweoffer-area .servbox a {float: left; background: #f0d782; color:#000; text-decoration: none; padding: 5px 15px; border-radius: 5px; }
.whatweoffer-area .servbox .header {background: #f0d782; border:none;}
.whatweoffer-area .servbox .modeltitle { float: left; width: 100%; border-bottom: none; padding: 0; margin: 0; color: #997600; opacity: 1;}
.whatweoffer-area .servbox .modelbox { float: left; width: 100%;}
.whatweoffer-area .servbox .modelbox p {float: left; width: 100%; font-size: 18px; color: #222; height: auto;}
.whatweoffer-area .servbox .modelbox p span {color: #000; font-weight: 500; padding: 0 5px; }
.whatweoffer-area .servbox .modelbox ul { float: left; width: 100%; margin: 0; padding: 0; list-style-type: none; border-top:1px dashed #ccc; padding-top: 15px;}
.whatweoffer-area .servbox .modelbox ul li {float: left; width: 100%; font-size: 19px; color: #997600; font-weight: 500; padding: 5px 0 0 39px; background: url("../img/model-arrow.png") no-repeat 0 10px;}
.whatweoffer-area .servbox .modelbox ul.offsetbox {border:none; padding: 0; }
.whatweoffer-area .servbox .modelbox ul.offsetbox li { background: none; padding: 0; margin: 0 0 20px 0;}
.whatweoffer-area .servbox .modelbox ul.offsetbox li h3 {float: left; width: 100%; font-size: 19px; color: #000; font-weight: 500; }
.whatweoffer-area .servbox .modelbox ul.offsetbox li p { color:#666; float: left; width: 100%; font-weight: 400; margin: 0 0 5px 0; font-size: 16px;}
.whatweoffer-area .servbox .modelbox ul.offsetbox li a { background: none; border-radius: 0; padding: 0; font-size: 16px; text-decoration: underline; }
.whatweoffer-area .servbox .modelclosebtn { background: #f0d782; color:#997600; padding: 5px 15px; border-radius: 5px; border:1px solid #997600;}

@media only screen and (min-width:992px) and (max-width: 1199px) { 
.whatweoffer-area .servbox h5 {font-size: 25px;line-height: 28px;}
}

@media only screen and (min-width:768px) and (max-width: 991px) { 
.whatweoffer-area .servbox {margin-bottom: 15px; height: auto;}
.whatweoffer-area .servbox p { height: auto; }	
}

@media only screen and (min-width:601px) and (max-width: 767px) { 
.whatweoffer-area .servbox h5 {font-size: 25px;line-height: 28px;}
.whatweoffer-area .servbox { margin-bottom: 15px; height: auto;}
.whatweoffer-area .servbox p {height: auto;  }
.service-pg-area h2 { font-size:40px;  }
.service-pg-area h2 span {font-size: 60px;}
.service-pg-area h1 {font-size: 41px; margin-bottom: 30px;}
}

@media only screen and (min-width:481px) and (max-width: 600px) { 
.whatweoffer-area .servbox {margin-bottom: 15px; height: auto;}
.whatweoffer-area .servbox p { height: auto; }	
.service-pg-area h2 { font-size:40px;  }
.service-pg-area h2 span {font-size: 60px;}
.service-pg-area h1 {font-size: 41px; margin-bottom: 30px;}
#service-banner {margin-top: 125px;}
}

@media only screen and (min-width:320px) and (max-width: 480px) { 
.whatweoffer-area .servbox {margin-bottom: 15px; height: auto;}
.whatweoffer-area .servbox p { height: auto; }	
.service-pg-area h2 { font-size:40px;  }
.service-pg-area h2 span {font-size: 60px;}
.service-pg-area h1 {font-size: 41px; margin-bottom: 30px;}
#service-banner {margin-top: 125px;}
}

/* OUR PRODUCTS PAGE CSS ======================= -- */
.product-pg-area { float: left; width: 100%; margin-top: 50px;}
.product-pg-area h1 {float: left; width: 100%; font-weight: 300; color: #000; font-size: 55px; margin-bottom: 60px; }
.product-pg-area h2 {float: left; width: 100%; font-weight: 800; color: #000; font-size: 54px; margin-bottom: 15px; position: relative;}
.product-pg-area h2 .vertline {border-left: 7px solid #ffd500; width:7px; height: 54px; position: absolute; left: -30px; top: 3%;}
.product-pg-area h2 span {float: left; width: auto; color: #ffd500; font-size: 45px;}
.product-pg-area p { float: left; width: 100%; font-size: 20px; font-weight: 300; line-height: 25px; margin: 0px 0 70px 0; }
.product-pg-area .dottedcircle{ position: relative;}
.product-pg-area .dottedcircle img { position: absolute; top:-130px; left: -106px;}

/* Features Section - Home Page
------------------------------*/
.product-pg-area  .features { margin-bottom: 50px;}
.product-pg-area  .features img { }
.product-pg-area  .features .features-item { color: #212529;}
.product-pg-area .features .features-item+.features-item {margin-top: 100px;}
@media (max-width: 768px) {
.product-pg-area .features .features-item+.features-item { margin-top: 40px;}
}
.product-pg-area .features .features-item h3 { font-weight: 700; font-size: 30px; margin-bottom: 20px; float: left; width: 100%; font-weight: 500; }
.product-pg-area .features .features-item p { float: left; width: 100%; font-size: 17px; margin-bottom: 15px; font-weight: 400; margin-bottom: 30px;}
.product-pg-area .features .features-item a { background: #c3c1c1; color: #fff; padding: 15px 25px; font-size: 17px; border-radius: 5px; text-decoration: none;  }
.product-pg-area .features .features-item img {
  /*border: 6px solid #fff;
  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1);*/
}
.product-pg-area .features .features-item .features-img-bg {position: relative; min-height: 500px;}
@media (max-width: 640px) {
.product-pg-area .features .features-item .features-img-bg {min-height: 300px; }
}
.product-pg-area .features .features-item .features-img-bg img {position: absolute; inset: 0; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;}
.product-pg-area .features .features-item .image-stack {display: grid; position: relative; grid-template-columns: repeat(12, 1fr);}
.product-pg-area .features .features-item .image-stack .stack-back { grid-column: 4/-1; grid-row: 1; width: 100%; z-index: 1;}
.product-pg-area .features .features-item .image-stack .stack-front { grid-row: 1; grid-column: 1/span 8; margin-top: 20%; width: 100%; z-index: 2;}

@media only screen and (min-width:992px) and (max-width: 1199px) {
}

@media only screen and (min-width:768px) and (max-width: 991px) {
.product-pg-area h2 {font-size: 40px;}
.product-pg-area h2 span {font-size: 40px;}
}

@media only screen and (min-width:601px) and (max-width: 767px) {
.product-pg-area h2 {font-size: 40px;}
.product-pg-area h2 span {font-size: 40px;}
}

@media only screen and (min-width:481px) and (max-width: 600px) { 
.product-pg-area h2 {font-size: 40px;}
.product-pg-area h2 span {font-size: 40px;}
}

@media only screen and (min-width:320px) and (max-width: 480px) { 
.product-pg-area h2 {font-size: 40px;}
.product-pg-area h2 span {font-size: 40px;}
}

/* CONTACT US PAGE CSS ======================= -- */ 
.contact-pg-area { float: left; width: 100%; position: relative; margin-bottom: 100px;}
.contact-pg-area .contactfrm-area {padding: 70px; border-bottom: 4px solid #b12a77; box-shadow: 0px 50px 100px 0px rgba(3, 3, 3, 0.02); background: #ffffff; /*margin: -300px 0 0 0;*/}
.contact-pg-area .contactfrm-area .contctdetail-padding {padding-left: 50px;}
.contact-pg-area .contactfrm-area h3 {float: left; width: 100%; font-size: 50px; font-weight: 500; color: #000; margin: 0 0 15px 0;}
.contact-pg-area .contactfrm-area h4 {float: left; width: 100%; font-size: 23px; text-transform: uppercase; font-weight: 500; margin-bottom: 10px;  }
.contact-pg-area .contactfrm-area p {loat: left; width: 100%; font-size: 20px; font-weight: 400; line-height: normal; }
.contact-pg-area .contactfrm-area p.phone { float: left; width: 100%; color: #ff3a46; font-size: 25px; color: #b12a77; }
.contact-pg-area .contactfrm-area p.address { float: left; width: 100%; color: #000; 	}
.contact-pg-area .contactfrm-area .form-control {color: #64697a; font-size: 17px; background-color: #ffffff !important; border-radius: 0; border: none; border-bottom: 1px solid #222; margin-bottom: 10px; padding-bottom: 22px;}
.contact-pg-area .contactfrm-area .maparea {float: left; width: 100%; margin: 25px 0 0 0; box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1); border:6px solid #fff;	}
.contact-pg-area .contactfrm-area .btn {min-width: 185px; border-radius: 0; line-height: 55px; background: #b12a77; border: none;}

/* TEAMCONNECT PAGE CSS ======================= -- */ 
.teamconnectpg-area { float:left; width:100%; padding: 50px 0; }
.teamconnectpg-area h1 {float:left; width:100%; color:#14183E; text-transform: uppercase; font-weight: 700; border-left:3px solid #e2af06; padding: 0px 20px; font-size: 45px; margin: 0 0 30px 0;  }
.teamconnectpg-area h2 {float:left; width:100%; color:#DF6951; text-transform: uppercase; font-weight: 700; font-size: 30px; margin: 0 0 20px 0;  }

.teamconnectpg-area ul { margin: 0; padding: 0; list-style-type: none; float:left; width:100%;}
.teamconnectpg-area ul li { margin: 0 0 15px; padding: 0 0 0 40px; float:left; width:100%; color: #000; font-size: 18px; font-weight: 700; background: url("../img/tick.png") no-repeat 0 0;}
.teamconnectpg-area h3 {float:left; width:100%; color:#5E6282; margin-bottom: 30px;}
.teamconnectpg-area .productbx {float:left; width:100%; border:1px solid #dedede; background: #fff; padding: 20px; margin: 0 0 15px 0; min-height: 295px; }
.teamconnectpg-area .productbx.bxheight {min-height: 200px;}
.teamconnectpg-area .productbx h4 {float:left; width:100%; color: #DF6951;margin: 0 0 15px 0; font-size: 22px; font-weight: 600; border-bottom: 1px dashed #c2c0c0; padding: 0 0 10px 0;  }
.teamconnectpg-area .productbx h4 img {  margin: 0 15px 0 0; }
.teamconnectpg-area .productbx p { float:left; width:100%; font-size: 16px; line-height: normal; color: #5E6282;  }
.teamconnectpg-area .features-area {float:left; width:100%; margin: 25px 0; }
.teamconnectpg-area .features-area .featurebox { float:left; width:100%; border: 1px solid #ddd; padding: 15px; text-align: center; margin-bottom: 15px; min-height: 150px; background: #fff;}
.teamconnectpg-area .features-area .featurebox h5 {float:left; width:100%; color: #14183E; font-size: 20px; margin: 0 0 15px 0; font-weight: 600;  }
.teamconnectpg-area .features-area .featurebox p {float:left; width:100%; line-height: normal; margin: 0;}
@media (max-width: 991px) {
	.contact-pg-area .contactfrm-area .contctdetail-padding {padding-left:0; float: left; width: 100%; margin: 25px 0 0 0;}
}

/* OUR TEAM PAGE CSS ======================= -- */ 
.team-bg{background:url(../img/reviews-bg.png);overflow:hidden;background-repeat:no-repeat;background-size:cover;background-position:top center;background-attachment:fixed;width:100%;height:auto;position:relative; padding: 100px 0;}
.team-pg-area { float: left; width: 100%; margin-top: 50px;}
.team-pg-area h1 {float: left; width: 100%; font-weight: 300; color: #000; font-size: 55px; margin-bottom: 60px; }
.team-pg-area h2 {float: left; width: 100%; font-weight: 800; color: #000; font-size: 60px; margin-bottom: 15px; text-transform: uppercase;}
.team-pg-area h2 span {float: left; width: auto; color: #b12a77; font-size: 85px;}
.team-pg-area p { float: left; width: 100%; font-size: 20px; font-weight: 300; line-height: 25px; margin: 0px 0 30px 0; }
.team-pg-area .dottedcircle{ position: relative;}
.team-pg-area .dottedcircle img { position: absolute; top:-130px; left: -106px;}

.team-gallery {float: left; width: 100%; padding: 0 0 50px 0; }
.team-gallery h3 {float: left; width:100%; color: #ffd500; font-size: 50px; margin-bottom: 20px; font-weight: 600; }
.team-gallery img { width: 100%; box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1); border: 6px solid #fff; }