html{scroll-behavior: smooth;}
::selection {background: rgb(207 19 67 / 50%); color: #ffffff; text-shadow: none;}
::-moz-selection {background: rgb(207 19 67 / 50%); /* Firefox */ color: #ffffff; text-shadow: none;}
::-webkit-selection {background: rgb(207 19 67 / 50%); /* Safari */ color: #ffffff; text-shadow: none;}

body{font-family: "Parkinsans", sans-serif; font-size:14px; line-height: 22px; color:#000000; margin: 0px; padding: 0px; background-color:#0b1319; -webkit-font-smoothing: antialiased;}
ul {list-style: none; margin:0;	padding:0;}
ul,li{padding:0; margin:0;}
li{list-style-type: none; font-size: 14px; text-transform: uppercase; font-weight: bold;}
.navbar-nav{margin: 0 0 0 0;}
.navbar-nav li a:hover,
.navbar-nav li a:focus {outline:none;	outline-offset: 0;text-decoration:none; background: transparent;}
a {color: #4f4f4f;	text-decoration: none;-webkit-transition: 300ms;	-moz-transition: 300ms;	-o-transition: 300ms;	transition: 300ms;}
a:focus, a:hover {color: #23527c; text-decoration: underline;}
a:active, a:hover {outline: 0;}
span{font-family: "Parkinsans", sans-serif; font-size: 20px; line-height: 30px; color: #4f6373;}

h1{font-family: "Parkinsans", sans-serif; font-size:88px; color: #deecf8; line-height: 94px; font-weight: normal; margin: 0 0 0 0; padding: 0 0 0 0;}
h2{font-family: "Parkinsans", sans-serif; font-size:48px; color: #deecf8; line-height: 56px; font-weight: normal; margin: 0 0 0 0; padding: 0 0 0 0;}
h3{font-family: "Parkinsans", sans-serif; font-size:36px; color: #deecf8; line-height: 48px; font-weight: normal; margin: 0 0 0 0; padding: 0 0 0 0;}
h4{font-family: "Parkinsans", sans-serif; font-size:28px; color: #deecf8; line-height: 32px; font-weight: normal; margin: 0 0 0 0; padding: 0 0 0 0;}
h5{font-family: "Parkinsans", sans-serif; font-size:18px; color: #deecf8; line-height: 26px; font-weight: normal; margin: 0 0 0 0; padding: 0 0 0 0;}
h6{font-family: "Parkinsans", sans-serif; font-size:14px; color: #deecf8; line-height: 28px; font-weight: normal; margin: 0 0 0 0; padding: 0 0 0 0; text-transform: uppercase;}
p{font-family: "Parkinsans", sans-serif; font-size:14px; line-height: 26px; color:#deecf8; margin:0px 0 0 0; padding: 0 0 0 0;}
.big-text-h1{font-family: "Parkinsans", sans-serif; font-size:114px; color: #202d37; line-height:96px; font-weight: normal; margin: 0 0 0 0; padding: 0 0 0 0; text-transform: uppercase; font-weight: 800;}
.big-text-outline{font-family: "Parkinsans", sans-serif; font-size:114px; color: rgb(32 45 55 / 0%); line-height:96px; font-weight: normal; margin: 0 0 0 0; padding: 0 0 0 0; text-transform: uppercase; font-weight: 800; -webkit-text-stroke-width: 1.5px; -webkit-text-stroke-color: #deecf8;}
@media (max-width:767px){
  h1{ font-size: 12vw; margin: 0 0 0 0; line-height: normal;}
  h2{ font-size: 9vw; margin: 0 0 0 0;}
  /* h3{ font-size: 22px !important; } */
  /* h4{ font-size: 6vw !important; } */
  p{font-size: 14px;}
}
mark, .mark{background: rgb(19, 111, 245); color: #ffffff;}
.padding-hundred{padding: 100px;}
.padding-top {padding-top:150px;}
.padding-bottom{padding-bottom:150px;}
.padding-none{padding: 0 0 0 0;}
.space-50{padding-top:50px;}
.space-bottom-50{padding-bottom:50px;}
.padding-20{padding: 20px;}
.navbar-toggle {/*border:1px solid #fff;*/	margin-top:15px;}
.navbar-toggle i{color: #ffffff; font-size: 34px;}
.main-nav {left: 0;	position: absolute;	top: 0;	width: 100%; z-index: 1000; border: 0px; border-radius: 0px; border-bottom: 1px solid rgb(255 255 255 / 23%); }
.top-bar-hide {display: none;}
.top-bar {position:absolute; right:30px;	top:35px;	z-index: 10;}
.top-bar span {margin-left:10px; float: left;}
.contact-grad-btn {background-image: linear-gradient(to right, #fe8c00 0%, #f83600  51%, #fe8c00  100%); border-radius: 46px; margin:0 30px; padding: 8px 25px; text-align: center; text-transform: uppercase; font-size: 14px; transition: 0.5s; background-size: 200% auto; color: white; display: block;}
.contact-grad-btn:hover {background-position: right center; color: #fff; text-decoration: none;}


#navigation .container {position:relative;}
.navbar-brand {width: 240px; height:auto; padding: 0px; margin:15px 0 15px 0;}
.navbar-brand a:hover{border: 0px;}
#navigation .navbar-right {margin-top: 60px; margin-right: 0px;}
#navigation .navbar-right li a {color:#ffffff; height: 100%; font-family: "Parkinsans", sans-serif; font-size: 14px; font-weight: normal; text-transform: none; margin: 0 3px; padding:3px 10px;}
#navigation .navbar-right li a.active,
#navigation .navbar-right li a:hover,
#navigation .navbar-right li a:focus,
#navigation .navbar-right li.active a{border-bottom: 3px solid #f9068b;}

.bnr-cta-bottom{width: 1100px; height: auto; padding: 30px 0; position: absolute; bottom: 0px; z-index: 1;}
.text-highlight{width: 300px; height: auto; float: left;;}
.text-highlight span{width: auto; height: auto; text-transform: uppercase; font-size: 11px; line-height: 12px; color: #ffffff; background: #cf1343;}
.primary-btn {background: radial-gradient(ellipse farthest-corner at right bottom, #930c2e 0%, #cf1343 8%, #cf1343 30%, #cf1343 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #ff1d56 0%, #ff1d56 8%, #ff1d56 25%, #930c2e 62.5%, #930c2e 100%);}
.primary-btn {width: auto; float: right; padding: 20px 30px; transition: 0.5s; background-size: 200% auto; color: white; display: block; -webkit-font-smoothing:auto; font-size: 14px; line-height: normal; -webkit-border-radius:50px; moz-border-radius: 50px; border-radius:50px; text-align:center; border: none;}
.primary-btn:hover {background-position: right center; /* change the direction of the change here */ color: #fff; text-decoration: none;}
.primary-btn i{font-size: 14px; padding: 0 0 0 12px;}
.secondary-btn{width: auto; float: left; margin: 0; padding: 20px 35px; background: #000000; color: #ffffff; -webkit-font-smoothing:auto; font-size: 28px; line-height: normal; -webkit-border-radius:75px; moz-border-radius: 75px; border-radius:75px; border: 0; text-align:center; display:block;}
.secondary-btn:hover{text-decoration: none; background: #eaeaea; color: #000000;}
/* .secondary-btn i{font-size: 14px; padding: 0 0 0 12px;} */
.submit-btn{padding: 20px 40px; background: #06201b; color: #ffffff; font-family: "Parkinsans", sans-serif; -webkit-font-smoothing:auto; font-size: 14px; line-height: normal; -webkit-border-radius:9px; moz-border-radius: 9px; border-radius:9px; border: 0px; text-align:center;}
.submit-btn:hover{text-decoration: none; background: #cf1343; color: #ffffff;}
.underline-btn{width: auto; float: left; margin: 18px 0 0 30px; padding: 0px 10px; color: rgb(0 0 0 / 60%); font-size: 18px; text-decoration: underline; text-decoration-color: #cf1343; text-decoration-thickness: 3px;}
.underline-btn:hover{text-decoration: none; color: #000000; text-decoration: underline; text-decoration-color: #53d799; text-decoration-thickness: 3px;}
.ghost-btn{width: auto; float: left; margin: 0; padding: 25px 40px; background: none; color: #000000; -webkit-font-smoothing:auto; font-size: 14px; line-height: normal; -webkit-border-radius:75px; moz-border-radius: 75px; border-radius:75px; border: 2px solid #000000; text-align:center; display:block;}
.ghost-btn:hover{text-decoration: none; color: #000000; border:2px solid #e6e6e6;}
.jobapply-btn {background: radial-gradient(ellipse farthest-corner at right bottom, #4CAF50 0%, #4CAF50 8%, #4caf50 30%, #4caf50 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #CDDC39 0%, #cddc39 8%, #cddc39 25%, #4caf50 62.5%, #4caf50 100%);}
.jobapply-btn {width: auto; float: right; padding: 15px 20px 15px 30px; transition: 0.5s; background-size: 200% auto; color: white; display: block; -webkit-font-smoothing:auto; font-size: 14px; line-height: normal; -webkit-border-radius:50px; moz-border-radius: 50px; border-radius:50px; text-align:center; border: none;}
.jobapply-btn:hover {background-position: right center; /* change the direction of the change here */ color: #fff; text-decoration: none;}
.jobapply-btn span{font-size: 26px !important; line-height: 24px !important; color: #deecf8 !important; vertical-align: middle !important; padding-left: 10px;}
.icon-btn {width: auto; height: auto; float: left; padding: 10px 10px 10px 25px; background: #33404c; color: white; line-height: 38px; font-size: 14px; border-radius:50px; border: none;}
.icon-btn:hover {color: #fff; background: #243340; text-decoration: none; box-shadow: -1px -1px 24px -3px rgba(0,0,0,0.75); -webkit-box-shadow: -1px -1px 24px -3px rgba(0,0,0,0.75); -moz-box-shadow: -1px -1px 24px -3px rgba(0,0,0,0.75);}
/* .icon-btn label{float: left; vertical-align: middle; padding: 0 15px 0 0; margin: 0 0 0 0;} */
.icon-btn span{background: #cf1343; float: right; border-radius: 25px; color: #ffffff; font-size: 22px; padding: 8px; margin: 0 0 0 15px;}
.icon-btn:hover span{background: #0b1319;}
/*++++++++++++++++
Footer CSS
+++++++++++++++++*/
/* .footer{width: 100%; height: auto; float: left; background: url("../images/foot-bg.jpg") no-repeat bottom center; background-size: 100%; padding: 250px 0 80px 0;} */
.footer{width: 100%; height: auto; float: left; background: #162028;}
.footer-logo-typo{width: 100%; height: auto; float: left;}
.footer .container .row{border-top: 1px solid #b3c6c2; border-bottom: 1px solid #b3c6c2;}
.footer h4{font-size: 18px; font-weight: bold; padding-bottom: 10px; color: #b8b8c5;}
.foot-readmore-link{font-size:14px; margin-top: 20px; text-decoration: none; float: left; color: #b8b8c5; text-decoration: underline; text-decoration-color: #b8b8c5; text-decoration-thickness: 2px;}
.foot-readmore-link:hover {color: #8e90a3; text-decoration: underline; text-decoration-color: #ff5a00; text-decoration-thickness: 2px;}
.foot-readmore-link span{vertical-align: middle; color: inherit; }
/* .foot-readmore-link:hover{color: #8e90a3; text-decoration-color: #ff5a00; text-decoration-thickness: 2px;} */
.logofooter {width: 100%; height: auto; float: left; padding:0 0;}
.logofooter span{width: 100%; height: auto; float: left; padding:10px 0 30px 0; font-size:12px; line-height: 22px;}
.logofooter img{width: 70px; padding: 10px;}
.footer-col{float: left;}
.footer_ul {list-style-type:none; padding-top:20px; margin-left:0px; float: left; margin-bottom:0px;}
.footer_ul li {width:100%; float: left; font-size:14px; list-style: none; padding: 5px 0;}
.footer_ul li:last-child{border-right: 0px;}
.footer_ul li a {text-transform: none; font-weight: normal; color: #b8b8c5; text-decoration: underline; text-decoration-color: #b8b8c5; text-decoration-thickness: 2px;}
.footer_ul li a:hover {color: rgb(184 184 197 / 75%); text-decoration: underline; text-decoration-color: #cf1343; text-decoration-thickness: 2px;}
.footer_ul {float: left;}
.footer_ul p {width:100%; float: left; font-size:14px; padding: 10px 0; color: #b8b8c5;}
.social-links{margin: 0 0 0 0;}
.social-links h4{padding: 0 0 0 0;}
.social-links P{padding-bottom: 20px;}
.social-links ul{width: auto; height:  auto; float: left; padding: 0px 0 0 0px;}
.social-links ul li{width: auto; height:  auto; float: left; padding-top: 0px; padding-right: 10px; list-style: none;}
.social-links ul li a{width: auto; height: auto;}
.social-links ul li a img{width: 40px; height: auto; float: left;}
/* .social-links ul li a i{color: #ffffff;} */
/* .social-links ul li a:hover{background: #1d5b58;} */
/* .social-links ul li a svg{fill:#edfec7;} */
/* .social-links ul li a svg:hover{fill:#ff5a00;} */
.copyright {width: 100%; float: left; background: #0e151a; padding:10px 0 10px 0; margin: 0px 0 0 0;}
/* .copyright .container{border-top: 1px solid #1d5b58} */
.copyright .col-md-6{padding: 0px;}
.copyright p { text-align:left; font-size: 14px; color: #00cf8e; padding:10px 20px 10px 0px; margin-bottom:0; float: left;}
.post{width: 100%; height: auto; float: left; padding: 0px 0 0 0;}
.post p { font-size:14px; padding-bottom: 30px; text-transform: capitalize;}
.email-call{width: 100%; height: auto; float: left; padding: 0px 0px 0px 0px;}
.email-call span{width:100%; height: auto; float: left; padding: 1px 15px 1px 0;}
.email-call i {color:#b8b8c5; font-size:18px; padding-right:5px;}
.email-call a {font-family: "Parkinsans", sans-serif; font-size: 14px; margin-top: 20px; text-decoration: none; color: #b8b8c5; text-decoration: underline; text-decoration-color: #b8b8c5; text-decoration-thickness: 2px;}
.email-call a:hover {color: #8e90a3; text-decoration: underline; text-decoration-color: #cf1343; text-decoration-thickness: 2px;}

footer .email-call span{width:auto; height: auto; float: left; font-size: 12px;}
footer .email-call i {font-size:18px; padding-right: 15px;}
footer .email-call a {font-size:14px;}
footer .email-call a:hover {color: #8e90a3; text-decoration: underline; text-decoration-color: #ff5a00; text-decoration-thickness: 2px;}

.bottom_ul { list-style-type:none; float: left; padding-top:14px; padding-bottom: 14px; margin-bottom:0;}
.bottom_ul li {color: #b8b8c5; float:left; line-height:18px; font-size: 13px; text-transform: none; font-weight: normal; list-style: none; border-right: 1px solid #c2da8a; padding: 0 5px;}
.bottom_ul li:last-child{border-right: 0px; border-left: 0px;}
.bottom_ul li a { color:#629a85;  font-size:13px;}

/* kreativemug styles */
.kreativemug{width:auto; float: right; margin-top: 0;}
.kreativemug span{text-align: left; color: #878e8d; font-size: 11px; padding: 10px 0; margin-bottom: 0; float: left;}
.kreativemug a{text-align: left; color: #878e8d; font-size: 11px; padding: 13px 0 0 0; margin-bottom: 0; float: left;}
.kreativemug i{font-size: 14px; color: #57b55b; padding: 0 6px 0 6px;}
.kreativemug a:hover{opacity: 0.8; text-decoration: underline;}
.kreativemug img{width:54px; height: auto; float: right;}
/* subpage css */
.sub-pg-banner{width:100%; height: 500px; background:url("../images/packages-pg-bnr.jpg") no-repeat center bottom #fafafc; background-size: cover;}
.subpg-bnr-content{width: 90%; height: auto; padding: 15em 0px 10em 0; margin: 0 auto;}
.subpg-bnr-content h1{color: #ffffff;}
.subpg-bnr-content h4{color: rgb(255 255 255 / 60%); font-size: 18px; padding-bottom: 30px;}
.subpg-bnr-content h3 a{text-decoration: underline; text-decoration-color: #ff5a00; color: inherit;}
.subpg-bnr-content h3 a:hover{text-decoration: underline; text-decoration-color: #ff5a00; color:#ffffff; background: #f4f9f5;}
.contact-banner{width:100%; height: 100vh; background-color: rgba(11,19,25,0.5); background-blend-mode: color; background-size: cover; -box-shadow: -2px -134px 87px -56px rgba(11,19,25,1) inset; -webkit-box-shadow: -2px -134px 87px -56px rgba(11,19,25,1) inset; -moz-box-shadow: -2px -134px 87px -56px rgba(11,19,25,1) inset;}
.projectpg-banner{width:100%; height:100vh; background-color: rgba(11,19,25,0.5); background-blend-mode: color; background-size: cover; -box-shadow: -2px -134px 87px -56px rgba(11,19,25,1) inset; -webkit-box-shadow: -2px -134px 87px -56px rgba(11,19,25,1) inset; -moz-box-shadow: -2px -134px 87px -56px rgba(11,19,25,1) inset;}
.project-deets-pg-banner{width:100%; height:auto; background:url("../images/why-us-parallax-bg.jpg") no-repeat center bottom #fafafc; background-size: cover; -box-shadow: -2px -134px 87px -56px rgba(11,19,25,1) inset; -webkit-box-shadow: -2px -134px 87px -56px rgba(11,19,25,1) inset; -moz-box-shadow: -2px -134px 87px -56px rgba(11,19,25,1) inset;}
.project-deets-pg-banner-gradient{width:100%; height:auto; background: #0b1319; background: linear-gradient(180deg, #162028 0%, rgba(11, 19, 25, 1) 100%); -box-shadow: -2px -134px 87px -56px rgba(11,19,25,1) inset; -webkit-box-shadow: -2px -134px 87px -56px rgba(11,19,25,1) inset; -moz-box-shadow: -2px -134px 87px -56px rgba(11,19,25,1) inset;}
.about-banner{width:100%; height: 100vh; background-color: rgba(11,19,25,0.5); background-blend-mode: color; background-size: cover; -box-shadow: -2px -134px 87px -56px rgba(11,19,25,1) inset; -webkit-box-shadow: -2px -134px 87px -56px rgba(11,19,25,1) inset; -moz-box-shadow: -2px -134px 87px -56px rgba(11,19,25,1) inset;}
.services-banner{width:100%; height:100vh; background-color: rgba(11,19,25,0.5); background-blend-mode: color; background-size: cover; -box-shadow: -2px -134px 87px -56px rgba(11,19,25,1) inset; -webkit-box-shadow: -2px -134px 87px -56px rgba(11,19,25,1) inset; -moz-box-shadow: -2px -134px 87px -56px rgba(11,19,25,1) inset;}
.projects-pg-banner{width:100%; height: 300px; background-image: repeating-radial-gradient(circle at 0 0, transparent 0, #007d81 40px), repeating-linear-gradient(#2a4640f0, #105344);}
.packages-pg-banner{width:100%; height: 300px; background-image:repeating-radial-gradient(circle at 0 0, transparent 0, #224bcc 40px), repeating-linear-gradient(#161e8af0, #0b2b8e);}
.careers-banner{width:100%; height: 100vh; background-color: rgba(11,19,25,0.1); background-blend-mode: color; background-size: cover; -box-shadow: -2px -134px 87px -56px rgba(11,19,25,1) inset; -webkit-box-shadow: -2px -134px 87px -56px rgba(11,19,25,1) inset; -moz-box-shadow: -2px -134px 87px -56px rgba(11,19,25,1) inset;}



.contact-sec{width: 100%; height: auto; float: left;}
.contact-main-text {padding: 0 0 50px 0;}
.contact-main-text span{color: inherit;}
.contact-main-text h2{padding-bottom: 15px;}
.contact-main-text h3{padding-bottom: 10px;}
.contact-main-text h5{padding-bottom: 10px;}
.building-box{ padding: 0 0 0 0; margin: 0 0 0 0;}
/* .building-box span{font-weight: bold; color: inherit;} */
.address-box {background: #162029; padding: 30px 30px 32px 30px; float: left; height: auto; border-radius: 16px;}
.address-box h4{padding: 0 0 15px 0;}
.address-box h5{padding: 0 0 15px 0;}
.address-box p{padding: 0 0 20px 0;}
.info-box {background: #202f3c; padding: 20px; float: left; height: auto; border-radius: 16px;}
.info-box h4{padding: 0 0 15px 0;}
.info-box h5{padding: 0 0 15px 0;}
.info-box p{padding: 0 0 20px 0;}
.contact-form{padding: 15px 0 0 0; /*float: left;*/}
.contact-form .form-group{margin-bottom: 25px;}
.input-box{padding: 0 30px;}
.form-group span{font-size:12px; line-height:24px; color:#deecf8; }
.form-group label{color: #ff0000; background: none; padding: 0 0 0 0;}
.form-box{background: #162029; border-radius: 18px; padding:25px 48px; margin: 0 0 0 0; }
.form-box h4{padding: 0 0 20px 0;}
.form-box h6{padding: 0 0 20px 0;}
.form-box h6 a{color: inherit; text-decoration: underline; text-decoration-color: #cf1343; text-decoration-thickness: 3px;}
.form-box h6 a:hover{background:#cf1343; color: #ffffff;}
.form-group input {width: 100%; height: 42px; background: #162029; border: 0px; border-bottom: 1px solid #4f6373; box-shadow: none; border-radius: 0;}
.form-group input::placeholder {color: #deecf8;}
.form-group select {width: 100%; height: 38px; font-size: 14px; color: #868686; border-radius: 0px;background: none; border: 1px solid #bfbfbf; box-shadow: none;}
.form-group textarea{border: 1px solid #4f6373; border-radius: 6; background: #162029; }
.form-group button{float: left;}
/*========================
g-map styles
===========================*/
.g-map{ margin-bottom: 0px; margin-top:0px;}
.g-map img{width: 60px;}
#map {width: 100%; height: 350px; margin-top: 30px; margin-bottom: 0px; border-radius: 16px;}
.info-window {font-family: "Parkinsans", sans-serif; font-size:14px;}
.info-content {color: #999;}
.info-window h5{ padding: 0  0; color: #0b1319;}
.info-window p{ padding: 0  0; color: #0b1319;}
/*========================== MEDIA QUERY CSS FOR RESPONSIVE
 Extra small devices (phones, 600px and down)
 ================================ */
  @media only screen and (max-width: 600px) {
    .navbar-brand {width: 260px; margin:0px 5px;}
    .navbar-brand a img{width:100%;}
    #navigation .navbar-right li a{color: #}
    .banner-text h1 {margin: 0 0 20px 0; height: 21px;}
    .form-box{padding: 30px;}
    .input-box{padding: 0 0px;}
    .form-group{padding: 0px;}
    .contact-form .form-group{margin-bottom: 15px;}
    .footer .container{padding-left:25px; padding-right: 25px;}
    .subpg-bnr-content{width: 90%;}
    .subpg-bnr-content h1{font-size: 70px !important; line-height: 60px !important;}
    .subpg-bnr-content h3{font-size: 28px; line-height: 28px; padding-top: 15px;}
    .address-box{width: 100%;}
    .slider h4 a{font-size: 12px;}
    .growmetic-in-numbers h6{padding: 0 0 50px 0;}
    .abt-team-img{padding: 0px !important; top: 18em !important; margin-bottom: 180px;}
    .bnr-content{width: 100% !important; right: 0 !important; left: 0 !important;}
    .big-text-outline{font-size: 54px; line-height: 58px;}
    .big-text-h1{font-size: 64px; line-height: 58px;}
    .bnr-cta-bottom{width: 90%;}
    .pragathi-office-img {padding: 12em 3em 6em 3em !important; margin: 30px 0 40px 0 !important;}
    .btn-center{left: 30% !important;}
    .qucik-contactbox span{font-size: 42px !important; border-radius: 46px !important;}
    .qucik-contactbox-wrapp {padding: 0 0px 10px 0 !important; float: left; width: 100%;}
    .pragathi-team-img{padding: 7em 2em 22em 2em !important;}
    .filters {width: 100% !important; margin: 0 auto 0px auto !important;}
    .about-intro-testimo h4{width: 100% !important; font-size: 16px !important; line-height: 22px !important; padding-bottom: 0 !important;}
    .about-intro-testimo{height: 25vh !important;}
    .owl-carousel .owl-item, .owl-carousel .item {height: 30vh !important;}
    .owl-thumb-item img{width: 90px !important;}
    .owl-thumbs{padding: 2% 0%;}
    .btn-container {float: left !important; width: 100% !important;}
    .services-weoffer{padding: 20px 0 20px 0!important;}
    .services-weoffer h1 {font-size: 38px !important; padding: 20px 0 0 0 !important;}
    .services-weoffer-copy{padding: 20px !important;}
  }
  /* Small devices (portrait tablets and large phones, 600px and up) */
  @media only screen and (min-width: 600px) {
    .sub-pg-text{width: 100%; padding-top: 10em;}
  }
  /* Medium devices (landscape tablets, 768px and up) */
  @media only screen and (min-width: 768px) {
    /* .navbar-brand{width: 180px;} */
    .top-bar {top:25px; right: 0px;}
  }
  /* Large devices (laptops/desktops, 992px and up) */
  @media only screen and (min-width: 992px) {

  }
  /* Extra large devices (large laptops and desktops, 1200px and up) */
  @media only screen and (min-width: 1200px) {

  }

  /*+++++++++++++++++
  nav with dropdowns
  ++++++++++++++++++ */
.toggle, [id^=drop] {display: none;}
.toggle i{font-size: 28px; float: right; padding: 10px 5px 0 0;}
nav {display: block; margin-left: auto; margin-right: auto; width:40%;}
nav:after {content:""; display:table; clear:both;}
nav ul {padding:0; margin:0; list-style: none; position: relative; top:35px;}
nav ul li {text-transform: none; margin: 0px; display:inline-block; float: left;}
nav a {margin: 0 10px; padding:3px 10px; color: #ffffff; font-size: 14px; font-weight: normal; display:block; text-decoration:none; line-height: normal;}
/* nav ul li ul li:hover { border-bottom: 3px solid #f9068b; } */
.menu ul li .active{text-decoration: none; border: 0; text-decoration: none;}
nav ul li ul li:hover{text-decoration: none; border: 0; text-decoration: none;}
nav a:hover {border-bottom: 2px solid #cf1343; color: rgb(255 255 255 / 60%); text-decoration: none;}
nav a.active {border-bottom: 2px solid #cf1343; color: rgb(255 255 255 / 60%); text-decoration: none;}
nav ul ul {display: none; position: absolute; top:35px; background: #26a888;}
nav ul li:hover > ul {display:inherit;}
nav ul ul li {width:100%; float:none; display:list-item; position: relative; padding: 3px 0;}
nav ul ul li a{color: #fffde8;}
nav ul ul li a:hover{color: #79e7cc; text-decoration: none; border-bottom: 0px;}
nav ul ul ul li {position: relative; top:-60px; left:170px; }
li > a:after { content:  ''; }
li > a:only-child:after { content: ''; }
@media all and (max-width : 768px) {
nav {width: 100%; margin: -10px 0 0 0; background: #0b1319; -webkit-border-bottom-right-radius: 16px; -webkit-border-bottom-left-radius: 16px; -moz-border-radius-bottomright: 16px; -moz-border-radius-bottomleft: 16px; border-bottom-right-radius: 16px; border-bottom-left-radius: 16px; padding-bottom: 5px;}
	.toggle + a,
	.menu {display: none;}
  .toggle {display: block; padding:0 0; color:#332537; font-size:14px; text-decoration:none; border:none;}
  .toggle .fa-bars {display: block; padding:12px 15px; background: #0b1319; color:#ffffff; border-radius: 50px; text-decoration:none; border:none;}
  .toggle .fa-caret-down {display: block; padding: 0 0 0 0; color:#332537; text-decoration:none; border:none;}
  .toggle:hover {background-color: none;}
  [id^=drop]:checked + ul {display: block;}
  nav ul{top: 0;}
	nav ul li {display: block; width: 100%; padding: 5px 10px;}
	nav ul ul .toggle,
	nav ul ul a {padding: 0 40px;}
  nav ul ul ul a {padding: 0 80px;}
	nav a:hover,
 	nav ul ul ul a {}
	nav ul li ul li .toggle,
	nav ul ul a,
  nav ul ul ul a{margin: 0 3px; padding:3px 10px; color:#FFF; font-size:14px;}
	nav ul li ul li .toggle,
	nav ul ul a {}
	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: #ffffff;
		has to be the same number as the "line-height" of "nav a"
	}

	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}

	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {position: static;}
  #btn{display: none;}
}
@media all and (max-width : 330px) {
 	nav ul li {display:block; width: 94%;}

}
.nav-gradient{background: #282a33;
background: linear-gradient(180deg, rgba(40, 42, 51, 0.65) 0%, rgba(19, 125, 65, 0) 100%);}
.address {padding:20px;}
.address h4 {color: #1c022e;}
.address p {color: #1c022e; font-size: 14px; margin:0 0 30px 0;}
.address a{font-size: 14px; color: #1c022e; display:block; line-height:normal; float: left; margin: 0 25px 0 0;}
.address a i{padding-right: 12px; font-size: 14px; color: #ff2ab1;}
.address a:hover{color: #adadad; text-decoration: underline; text-decoration-color: #ff2ab1; text-decoration-thickness: 2px;}

/*  ==== page Progress scroll load === */
.blok:nth-of-type(odd) {background-color:white;}
.blok:nth-of-type(even) {background-color:black;}
@-webkit-keyframes border-transform{

  0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; }
	14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; }
	28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; }
	42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; }
	56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; }
	70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; }
	84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; }
}
/* .paginacontainer {height: 3000px;} */
.progress-wrap {position: fixed; right: 30px; bottom: 30px; height: 46px; width: 46px; cursor: pointer; display: block; border-radius: 50px; box-shadow: inset  0 0 0 2px rgba(0,0,0,0.1); z-index: 10000; opacity: 0; visibility: hidden; transform: translateY(15px); -webkit-transition: all 200ms linear; transition: all 200ms linear;}
.progress-wrap.active-progress {opacity: 1; visibility: visible; transform: translateY(0);}
.progress-wrap::after {position: absolute; font-family: 'unicons'; content: '\e84b'; text-align: center; line-height: 46px; font-size: 24px; color: #cf1343; left: 0; top: 0; height: 46px; width: 46px; cursor: pointer; display: block; z-index: 1; -webkit-transition: all 200ms linear; transition: all 200ms linear;}
.progress-wrap:hover::after {opacity: 0;}
.progress-wrap::before {position: absolute; font-family: 'unicons'; content: '\e84b'; text-align: center; line-height: 46px; font-size: 24px; opacity: 0; background: black; /* --- Pijl hover kleur --- */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; left: 0; top: 0; height: 46px; width: 46px; cursor: pointer; display: block; z-index: 2; -webkit-transition: all 200ms linear; transition: all 200ms linear;}
.progress-wrap:hover::before {opacity: 1;}
.progress-wrap svg path {fill: none;}
.progress-wrap svg.progress-circle path {stroke: #cf1343; stroke-width: 4px; box-sizing:border-box; -webkit-transition: all 200ms linear; transition: all 200ms linear;}

.contact-form {margin-top: 0px;}
.contact-form .input-block {border: solid 1px #989898; width: 100%; height: 40px; padding: 20px; position: relative; margin-bottom: 15px; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}
.contact-form .input-block.focus {border: solid 1px #eeeeee;}
.contact-form .input-block.textarea {height: auto;}
.contact-form .input-block.textarea .form-control {height: auto; resize: none;}
.contact-form .input-block label {padding: 0 10px; background: #fff; position: absolute; left: 8px; top: 15px; display: block; margin: 0; z-index: 1; color: #999; font-size: 14px; font-weight: normal; line-height: 10px;}
.contact-form .input-block .form-control {background-color: transparent; border: medium none; border-radius: 0; box-shadow: none; color: #333; font-size: 14px; height: 40px; padding: 0; position: relative; top: -20px; z-index: 2;}
.contact-form .input-block .form-control:focus label {top: 0;}
.contact-form .square-button {background: #000000; color: #fff; font-size: 26px; text-transform: uppercase; text-align: center; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; padding: 0 60px; height: 60px; border: none; width: 100%;}
.contact-form .square-button:hover,
.contact-form .square-button:focus {background-color: red;}
.contact-form .input-block span{font-size: 12px; position: absolute; top: 38px; color: #7e7e7e;}
.contact-form .input-block.textarea{margin-top: 10px;}
.socialbtns{width: 100%; height: auto; float: left; padding-top: 30px !important;}
.socialbtns h5{padding-bottom: 20px;}
.socialbtns, .socialbtns ul, .socialbtns li {margin: 0; padding: 0px;}
.socialbtns li {list-style: none outside none; display: inline-block;}
.socialbtns a {width: auto; height: auto; font-size: 22px; color: #464646; padding:10px;}
.socialbtns a svg{  fill: #d4d4d4;}
/* .socialbtns a:hover{  fill: white;} */
.socialbtns a svg:hover {fill: #cacaca;}

.about-pg-intro{width: 100%; height: auto; float: left; background: #0B1319;
background: linear-gradient(180deg, rgba(11, 19, 25, 0) 0%, rgba(11, 19, 25, 1) 40%);}
.about-pg-intro h5{padding: 10px 0;}
.about-intro-box {padding: 0px 0 50px 0;}
.about-intro-box h1{padding: 0px 0 30px 0;}
.about-intro-box h1 a{color: inherit; text-decoration: underline; text-decoration-thickness: 8px; text-decoration-color: #ff5a00;}
.about-intro-box h1 a:hover{color: #ffffff; background: #ff5a00; text-decoration: underline; text-decoration-thickness: 5px; text-decoration-color: #ff5a00;}
.about-intro-box-img img{padding-bottom: 2em;}
.were-defined{width: 100%; height: auto; float: left; background:no-repeat top center #f6f6fa; background-color: rgba(11,19,25,0.5); background-blend-mode: darken;}
.were-defined h2{padding:0px 0 20px 0;}
.were-defined h4{padding:30px 0 20px 0;}
.were-defined img{padding-bottom: 0px; width: 90px;}
/* .were-defined p{color: #ffffff;} */
.pragathi-in-numbers h3{color: #cf1343; font-weight: normal; text-transform: uppercase; font-size: 50px;}
.pragathi-in-numbers h3 span{font-size: 68px; color: #deecf8; line-height: 64px; font-weight: 800;}
.pragathi-in-numbers h6{font-size: 16px; color: #deecf8; padding-bottom: 30px; font-weight: normal;}
.our-people{width: 100%; height: auto; float: left;}

.subheader-withline{width: 100%; height: auto; float: left; padding: 0px 0; margin: 0px 0 30px 0; border-bottom: 1px solid #b3c6c2;}
.subheader-withline span{font-size: 14px; color: #778e89;}

.section-background-parallax {background-attachment: fixed; background-position: center; background-size: cover; width: 100%; color: #FFFFFF; display: flex; justify-content: center; align-items: center;}
.parallax1 {background-image: url("../images/whyus-bg.jpg");}
.section-background-parallax2 {background-attachment: fixed; background-position: center; background-size: cover; width: 100%; color: #FFFFFF; display: flex; justify-content: center; align-items: center;}
.parallax2 {background-image: url("../images/about-blur-bg.jpg");}
.section-background-parallax3 {background-attachment: fixed; background-position: center; background-size: cover; width: 100%; color: #FFFFFF; display: flex; justify-content: center; align-items: center;}
.parallax3 {background-image: url("../images/project-pg-bnr.jpg");}
.section-background-parallax4 {background-attachment: fixed; background-position: center; background-size: cover; width: 100%; display: flex; justify-content: center; align-items: center;}
.parallax4 {background-image: url("../images/why-us-parallax-bg.jpg");}
.section-background-parallax5 {background-attachment: fixed; background-position: center; background-size: cover; width: 100%; display: flex; justify-content: center; align-items: center;}
.parallax5 {background-image: url("../images/service-bnr-img.jpg");}
.section-background-parallax6 {background-attachment: fixed; background-position: center; background-size: cover; width: 100%; display: flex; justify-content: center; align-items: center;}
.parallax6 {background-image: url("../images/service-parlx6.jpg");}
.section-background-parallax7 {background-attachment: fixed; background-position: center; background-size: cover; width: 100%; display: flex; justify-content: center; align-items: center;}
.parallax7 {background-image: url("../images/career-bnr.jpg");}
.section-background-parallax8 {background-attachment: fixed; background-position: center; background-size: cover; width: 100%; color: #FFFFFF; display: flex; justify-content: center; align-items: center;}
.parallax8 {background-image: url("../images/project-pg-bnr-re.jpg");}
/* Float animate button */
.float {position:fixed; bottom:92px; right:24px; text-align:center; z-index:1000;}
.float .trigger {border-radius:50%; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); position:relative; background:#42cf47; color:#fff; height:60px; width:60px; vertical-align:middle; animation: 1.5s linear 0s infinite normal pulse; transition: ease-in-out 0.2s; cursor: pointer;}
.float .trigger a i{color: #ffffff;}
.float .trigger:hover{transform:scale(1.1);}
.float.open .trigger .fa::before{content: "\f00d";}
.float .trigger .fa::after{transition: ease-in-out 1s;}
.fab.open .trigger i{transition: all 0.4s ease; transform: translateY(5px) rotate(360deg);}
.float i{font-size:28px; line-height:58px;}
.float .actions{opacity:0; transition: opacity 0.4s ease;}
.float.open .actions{opacity:1;}
.float .p-whatsapp a{position: absolute; opacity:0; background: #fff; color: #333; height: 60px; width: 60px; line-height: 40px; transition: transform 0.4s ease; right: 80px; transform: translateY(50px); transition: all 0.4s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); border-radius: 50%; right:-50px; transition-delay:0.3s; transform-origin: right center 0;}
.float.open .p-whatsapp a{position: absolute; top: 0; opacity:1; background: #fff; color: #333; height: 60px; width: 60px; line-height: 40px; transition: transform 0.4s ease; right: 0px; transform: translateY(50px); transition: all 0.4s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); border-radius: 50%; transition-delay:0.2s;}
.float.open .p-whatsapp a:hover{background:#25d366; color:white;}
.float .actions .p-info:nth-child(1){transform: translateY(-180px)}
@keyframes pulse {
    0% {box-shadow: 0px 1px 0px 3px #42cf477a, 0px 0px 0px 0px #42cf4742;}
    30% {box-shadow: 0px 1px 0px 3px #42cf477a, 0px 0px 0px 5px #42cf4742;}
    70% {box-shadow: 0px 1px 0px 3px #42cf477a, 0px 0px 0px 15px #42cf4742;}
    100% {box-shadow: 1px 1px 2px 1px #42cf477a, 0px 0px 0px 20px transparent;}
  }

/* +++++++
before and after img slider CSS
=++++++++ */
.image-comparison {max-width: 100%; margin-right: auto; margin-left: auto;}
.image-comparison__slider-wrapper {position: relative;}
.image-comparison__label {font-size: 0; line-height: 0;}
.image-comparison__label,
.image-comparison__range {position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; background-color: transparent; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; cursor: ew-resize; z-index: 20;}
@media (hover) {
  .image-comparison__range:hover ~ .image-comparison__slider .image-comparison__thumb {transform: scale(1.2);}
}
.image-comparison .image-comparison__slider-wrapper .image-comparison__range:active ~ .image-comparison__slider .image-comparison__thumb,
.image-comparison .image-comparison__slider-wrapper .image-comparison__range:focus ~ .image-comparison__slider .image-comparison__thumb,
.image-comparison .image-comparison__slider-wrapper .image-comparison__range--active ~ .image-comparison__slider .image-comparison__thumb {transform: scale(0.8); background-color: rgb(207 20 67 / 67%);}
.image-comparison__image-wrapper--overlay {position: absolute; top: 0; left: 0; width: calc(50% + 1px); height: 100%; overflow: hidden;}
.image-comparison__figure {margin: 0;}
.image-comparison__figure::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f2f2f2;}
.image-comparison__figure:not(.image-comparison__figure--overlay) {position: relative; padding-top: 66.666666667%;}
.image-comparison__image {position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 0 50%; object-position: 0 50%; overflow: hidden;}
.image-comparison__figure--overlay .image-comparison__image {z-index: 1;}
.image-comparison__caption {position: absolute; bottom: 12px; min-width: -webkit-max-content; min-width: -moz-max-content; min-width: max-content; display: flex; flex-direction: column; flex-wrap: nowrap; color: #fff;}
@media screen and (max-width: 40.063em) {
  .image-comparison__caption {font-size: 12px;}
}
.image-comparison__caption--before {left: 12px; z-index: 2;}
.image-comparison__caption--after {right: 12px; text-align: right;}
.image-comparison__caption-body {max-width: 40vmin; padding: 3px 10px; color: #ffffff; font-size: 14px; background-color: rgb(207 20 67 / 67%); border-radius: 12px;}
.image-comparison__slider {position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background-color:rgb(75 102 167 / 64%); transition: background-color 0.3s ease-in-out; z-index: 10;}
.image-comparison__range--active ~ .image-comparison__slider {background-color: rgba(255, 255, 255, 0);}
.image-comparison__thumb {position: absolute; top: calc(50% - 20px); left: calc(50% - 25px); width: 50px; height: 50px; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #cf1343; color: #fff; border-radius: 50%; box-shadow: 0 0 22px 0 rgba(0, 0, 0, 0.5); transform-origin: center; transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;}
.image-comparison__range::-webkit-slider-runnable-track {width: 40px; height: 40px; opacity: 0;}
.image-comparison__range::-moz-range-thumb {width: 40px; height: 40px; opacity: 0;}
.image-comparison__range::-webkit-slider-thumb {width: 40px; height: 40px; opacity: 0;}
.image-comparison__range::-ms-fill-lower {background-color: transparent;}
.image-comparison__range::-ms-track {position: relative; top: 0; left: 0; width: 100%; height: 100%; border: none; margin: 0; padding: 0; background-color: transparent; color: transparent; outline: none; cursor: col-resize;}
.image-comparison__range::-ms-thumb {width: 0.5%; height: 100%; opacity: 0;}
.image-comparison__range::-ms-tooltip {display: none;}
.project-pg-wrapper{width: 100%; height: auto; float: left; background: #cf1343; -webkit-border-radius: 75px; -moz-border-radius: 75px; border-radius: 75px;}


/* =============
 Pragathistudio CSS 28 JULY
 =============== */
/* video-bg */
.bnr-content{position: absolute; z-index: 1; top: 40%; width: 80%; left: 10%; right: 10%; margin: 0px auto;}
.bnr-content h1{text-align: center; text-transform: uppercase;}
.bnr-content h4{color: rgb(255 255 255 / 60%); font-size: 18px; padding-bottom: 30px;}
.bnr-content a{width: 240px; margin:30px auto 0px auto; float: none;}
.bnr-content .underline-btn{color: #ffffff;}
#main{width: 100%; height: 100vh; position: relative;}
#main video{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.overlay{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; background-image: linear-gradient(to bottom, rgb(0 0 0 / 70%) 30%, rgb(0 0 0 / 20%)); }
.video-bg{position: absolute; width: 100%; clip-path: circle(0% at 0 50%);}
.video-bg{clip-path: circle(150% at 0 50%); transition: 1s ease; transition-property: clip-path;}
.line-after {position: relative; overflow: hidden; display: block; padding-bottom: 30px;}
.line-after span {vertical-align: baseline; display: block; position: relative; font-size:16px; color: #4f6373; font-weight: 500; line-height: 26px; margin: 0 0 0 0; padding: 0 0 0 0;}
.line-after span:after {content: ''; position: absolute; width: 100%; top: 65%; margin-left: 10px; border-top: 1px solid #4f6373;}
.line-after h1 {vertical-align: baseline; display: block; position: relative; margin: 0 0 0 0; padding: 0 0 0 0;}
.line-after h1:after {content: ''; position: absolute; width: 100%; top: 65%; margin-left: 10px; border-top: 1px solid #4f6373;}
.btn-container {position: relative; padding: 110px 0 0 0;}
.btn-center {margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.explore-btn {width: auto; height: auto; padding: 20px 40px; font-size: 16px; color: #ffffff; border-radius: 50px; background-image: linear-gradient(to right, #02AAB0 0%, #00CDAC  51%, #02AAB0  100%); transition: 0.5s; background-size: 200% auto; box-shadow: 0 0 20px #eee; display: block;}
.explore-btn:hover {background-position: right center; /* change the direction of the change here */ color: #fff; text-decoration: none;}
/* process css */
.process-sec{width: 100%; height: auto; float: left;}
.process-sec h2{width: 100%; height: auto; float: left; color: #ffffff;}
.process-sec h4{width: 100%; height: auto; float: left; color: rgb(255 255 255 / 70%);}
.process-sec .line-after span{color: rgb(255 255 255 / 90%);}

.process {width: 100%; padding: 50px 0 0 0;}
.process__item {-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; padding: 15px 35px; transition: 0.4s ease-in-out;}
.process__item:hover{background: rgb(22 32 41); border-radius: 14px;}
.process__item:hover .process__number {transform: translateY(5px); color: #ffffff; -webkit-text-stroke: 1px #ffffff;}
.process__number {font-size: 120px; -webkit-text-stroke: 1px rgb(93 104 114); display: block; color: transparent; font-weight: normal; font-family:inherit; transition: 0.4s ease-in-out;}
.process__title {display: block; font-family:inherit; font-size: 20px; line-height: 24px; color: #ffffff; text-transform: none; font-weight: normal; margin-top: 45px;}
.process__subtitle ul li{width: 100%; list-style: disc;}
.process__subtitle ul li{font-size: 12px; text-transform: none; color: #ffff; font-weight: normal; text-align: left;}

@media (min-width: 768px) {
  .process {display: inline-block;}
  .process__item {width: 49%; display: inline-block;}
}
@media (min-width: 1200px) {
  .process {display: flex; flex-direction: row; justify-content: space-between;}
  .process__item {width: 100%;}
  .process__item:not(:last-of-type)::after {content: ""; width: 1px; height: 75%; background: rgb(93 104 114); position: absolute; right: 0; top: 50%; opacity: 1; transform: translateY(-50%);}
}
.fourbox-cta{width: 100%; height: auto; float: left; background: #162028;}
.fourbox-cta h5{color: #898b95;}
.fourbox-cta h5 a{color: #deecf8; text-decoration: underline; text-decoration-color: #cf1343; text-decoration-thickness:3px;}
/* Plan Div hover */
.div_hover {position: relative; transition-duration: 0.3s; transition-property: transform; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transform: translateZ(0);}
.div_hover:before {pointer-events: none; position: absolute; z-index: -1; content: ""; top: 100%; left: 5%; height: 20px; width: 90%; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); transition-duration: 0.3s; transition-property: transform opacity;}
.div_hover:hover {transform: translateY(-12px); animation-name: hover; animation-duration: 1.5s; animation-delay: 0.3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate;}
.div_hover:hover:before {opacity: 0.6; transform: translateY(6px); animation-name: shadow; animation-duration: 1.5s; animation-delay: 0.3s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate;}

.qucik-contactbox-wrapp{padding: 0 10px 0 0;}
.qucik-contactbox{width: 100%; height: auto; float: left; padding: 15px; margin: 0 10px 0 0; border-radius:8px;}
.qucik-contactbox span{float: right; background: rgb(255 255 255 / 65%); border-radius: 26px; padding: 10px; font-size: 26px;}
.qucik-contactbox h5{width: 100%; height: auto; float: left; font-size: 16px; color: rgb(255 255 255 / 65%); padding: 20px 0 0 0; line-height: 22px;}
.qucik-contactbox a{width: auto; height: auto; float: left; color: #ffffff; padding: 0 0 10px 0; margin: 0 5px 0 0; text-decoration: underline; text-decoration-color:rgb(255 255 255 / 30%); text-decoration-thickness:3px;}
.qucik-contactbox a:hover{text-decoration-color:rgb(255 255 255 / 70%); color:rgb(255 255 255 / 70%);}
.quick-email {background: #0f28b2;}
.quick-email span{color: #0f28b2;}
.quick-call {background: #961338;}
.quick-call span{color: #961338;}
.quick-whatsapp{background: #187132;}
.quick-whatsapp span{color: #187132;}
.quick-download{background: #47488b; width: 100%; height: auto; float: left; padding: 15px; margin: 0 10px 0 0; border-radius: 8px;}
.quick-download span{float: right; background: rgb(255 255 255 / 65%); border-radius: 26px; padding: 10px; font-size: 26px;}
.quick-download h5{width:auto; height: auto; float: left; font-size: 16px; color: rgb(255 255 255 / 65%); padding: 0px 0 0 0; line-height: 22px;}
.quick-download a{width: 100%; height: auto; float: left; color: #ffffff; padding: 0 0 3px 0; margin: 0 0 0 0; text-decoration: underline; text-decoration-color:rgb(255 255 255 / 30%); text-decoration-thickness:3px; font-size: 14px;}
.quick-download a:hover{text-decoration-color:rgb(255 255 255 / 70%); color:rgb(255 255 255 / 70%);}
.quick-download a span{background: none; color: inherit; font-size: 16px; float: none; vertical-align: middle; padding: 0 0 0 0;}
.pragathi_intro_sec {width: 100%; height: auto; float: left; /*background: url("../images/intro-service-bg.png") no-repeat right bottom 50px; background-size: 750px;*/}
.pragathi_intro_sec h2{width: 100%; height: auto; float: left; padding-bottom: 20px;}
.pragathi_intro_sec h5{color: #858f99;}
/* .service-box {display: block; top: 0px; position: relative; background: #162029; padding: 30px; margin:0 10px 0 0px; text-decoration: none; z-index: 0; overflow: hidden; border-radius: 16px;} */
.service-box{display: block; top: 0px; position: relative; padding: 30px; margin:0 10px 0 0px; text-decoration: none; z-index: 0; overflow: hidden; border-radius: 16px; background: #162029; background: linear-gradient(240deg, rgb(0, 0, 0, 0) 0%, rgb(22 32 41) 100%); border: 1px solid rgb(52 72 90 / 60%);}
.service-box:hover {transition: all 0.2s ease-out; background: #283038; -webkit-box-shadow: 3px 3px 46px 0px rgb(0 0 0 / 44%); -moz-box-shadow: 3px 3px 46px 0px rgb(0 0 0 / 44%); box-shadow: 3px 3px 46px 0px rgb(0 0 0 / 44%); top: -4px;}
.service-box img{width: 54px; height: auto; float: left; padding: 20px 0;}
.service-box h5{width: 100%; height: auto; float: left; border-bottom: 1px solid #404e5c;}
.service-box p{width: 100%; height: auto; float: left; padding:10px 0 20px 0;}
.service-box a{color: #898b95; text-decoration: underline; text-decoration-color:#cf1343; text-decoration-thickness:2px;}
.service-box-subdiv{width: 100%; height: auto; float: left; margin: 0 0 15px 0;}
.pragathi-office-img{padding: 2em; margin: 30px 0 0 0; background: #162028; background-size: cover; border-radius: 16px;}
/* .pragathi-office-img h3{padding-bottom: 30px;} */
.pragathi-office-img p{padding-bottom: 15px;}
.about-sec-homepage{width: 100%; height: auto; float: left; background: url("../images/about-bg.-png") no-repeat left bottom 120px #162028; background-size: 440px;}
.about-homepage-txt{padding: 0 30px; border-left: 1px solid #33404c; border-right: 1px solid #33404c;}
.about-homepage-txt h2{padding-bottom: 30px;}
.about-homepage-txt h5{padding-bottom: 20px;}
.about-homepage-txt p{padding-bottom: 40px;}
.pragathi-numnbers-wrapper{padding: 40px;}
.pragathi-numnbers-wrapper h5{font-size: 16px; color: #71818e; padding-bottom: 30px;}
.pragathi-numnbers h1{font-size: 68px; line-height: 64px; font-weight: 800;}
.featured-projects-sec{width: 100%; height: auto; float: left;}
.featured-projects-sec h3{padding:10px 0 20px 0;}

/* ======= index pg card hover */
.content-wrapper {margin: 0 auto; max-width: 100%; display: flex; flex-flow: row wrap; justify-content: center; padding:20px 0 0 0;}
.news-card {border: 0px solid aqua; margin: 0 5px; position: relative; height: 38rem; overflow: hidden; flex: 1; border-radius:22px; min-width: 290px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0);}
@media (min-width: 900px) {
/* .news-card {height: 38rem} */
}
.news-card::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; /*background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgb(8 9 67) 80%);*/}
.news-card__card-link {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; /*background: rgba(255,0,0,.5); */}
.news-card__image {width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 3s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: relative; z-index: -1;}
.news-card__text-wrapper {width: 100%; position: absolute; bottom: 0rem; padding:8rem 3rem 5rem 3rem; color: white; /*background-color: rgba(0, 0, 0, 0.4); */ transition: background-color 1.5s ease; background: rgb(255,255,255); background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, rgb(25 36 43) 100%);}
.news-card__title_sub {color: #ffffff; font-size: 22px; text-transform: none; line-height: 26px; padding: 0; transition: color 1s ease;}
.news-card__title {padding: 10px 0 0px 0; transition: color 1s ease; margin-bottom: .5rem; color: rgb(222 236 248 / 68%);}
.news-card__details-wrapper {max-height: 0; opacity: 0; transition: max-height 1.5s ease, opacity 1s ease;}
@media (min-width: 900px) {
    .news-card:hover .news-card__details-wrapper {max-height: 20rem; opacity: 1;}
    /* .news-card:hover .news-card__text-wrapper {background-color: rgb(0 0 0 / 70%);} */
    /* .news-card:hover .news-card__text-wrapper {background-color: rgb(40 46 215 / 70%);} */
    .news-card:hover .news-card__image {transform: scale(1.2); z-index: -1;}
  }
.news-card__excerpt {color: rgb(222 236 248 / 68%);}
/* CSS BG blur */
.feature{position:fixed; top:0; z-index:-1; width:100%; padding-top:40%; background: url("../images/about-blur-bg.jpg") top center no-repeat; -webkit-background-size:100%; -moz-background-size:100%; -o-background-size:100%; background-size:100%; -box-shadow: -2px -134px 87px -56px rgba(11,19,25,1) inset; -webkit-box-shadow: -2px -134px 87px -56px rgba(11,19,25,1) inset; -moz-box-shadow: -2px -134px 87px -56px rgba(11,19,25,1) inset;}
.content {position:relative; z-index:1; padding-top:45%; width:100%; margin:0 auto;}
@media only screen and (min-width:36.250em) {
  .content {width:100%; padding-top:35%; padding-bottom:5%;}
}
.discover-imgpop-txt{width: 240px; height: auto; padding: 30px; background: #149bb5; border-radius: 18px; position: absolute; top: 30px; left: 30px;}
.discover-imgpop-txt span{font-size: 56px; color: white;}
.discover-imgpop-txt h6{color: white; text-transform: uppercase;}
.discover-imgpop-txt p{color: white;}
.discover-imgpop-txt-2{width: 240px; height: auto; padding: 30px; background: #65113d; border-radius: 18px; position: absolute; top: 30px; left: 30px;}
.discover-imgpop-txt-2 span{font-size: 56px; color: white;}
.discover-imgpop-txt-2 h5{color: white; text-transform: uppercase;}
.discover-imgpop-txt-2 p{color: white;}
.c2c-detail-box{padding: 30px; background: #162029; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; margin: 0 20px 20px 0px; display: block; top: 0px; position: relative; z-index: 0; overflow: hidden;}
.c2c-detail-box img{width: 56px; height: auto; float: left; padding-bottom: 20px;}
.c2c-detail-box:hover {transition: all 0.2s ease-out; background: #283038; -webkit-box-shadow: 3px 3px 46px 0px rgb(0 0 0 / 44%); -moz-box-shadow: 3px 3px 46px 0px rgb(0 0 0 / 44%); box-shadow: 3px 3px 46px 0px rgb(0 0 0 / 44%); top: -4px;}
.c2c-detail-box h5{width: 100%; height: auto; float: left; padding-bottom: 15px;}
.c2c-detail-box p{width: 100%; height: auto; float: left;}

.career-detail-box{padding: 30px; background: #162029; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; margin: 0 20px 20px 0px; display: block; top: 0px; position: relative; z-index: 0; overflow: hidden;}
.career-detail-box img{width: 100%; height: auto; float: left; margin-bottom: 30px; border-radius: 16px;}
.career-detail-box:hover {transition: all 0.2s ease-out; background: #283038; -webkit-box-shadow: 3px 3px 46px 0px rgb(0 0 0 / 44%); -moz-box-shadow: 3px 3px 46px 0px rgb(0 0 0 / 44%); box-shadow: 3px 3px 46px 0px rgb(0 0 0 / 44%); top: -4px;}
.career-detail-box h2{width: 100%; height: auto; float: left; padding-bottom: 25px;}
.career-detail-box p{width: 100%; height: auto; float: left;}
/* =============
package filter package css
  ============= */
.projects-filters{width: 100%; height: auto; float: left;}
.filters{width: 60%; margin:0 auto 30px auto;}
.projects-filters .filters ul li.active-filter{color: #deecf8; font-weight: normal;}
.projects-filters .filters ul {padding: 0;}
.projects-filters .filters ul li {list-style: none; display: inline-block; padding: 0px 20px 0 20px; cursor: pointer; position: relative; text-transform: none; font-size:18px; color: rgb(222 236 248 / 70%); font-weight: normal;}
.projects-filters .filters ul li:after {content: ""; display: block; width: calc(0% - 60px); position: absolute; height: 3px; background: #cf1343; transition: width 350ms ease-out;}
.projects-filters .filters ul li:hover:after {width: calc(100% - 60px); transition: width 350ms ease-out;}
.projects-filters .filters ul li.active-filter:after {width: calc(100% - 60px);}
.projects-filters .filters-content {margin-top: 20px; height: auto;}
.all{padding: 0 0 0 0;}
/* ++++++++++++++++++
 Projects deetails page slider
++++++++++++++++ */
.owl-carousel {height: 100%;}
.owl-carousel .owl-item,
/* .owl-carousel .item {height: 100vh;} */
.owl-carousel .item {height: auto;}
.owl-carousel .owl-item img {transform-style: initial; height: 100%; object-fit: cover; border-radius: 18px;}
.owl-thumb-item img {width: 150px; height: auto; margin: 0 3px; border-radius: 14px; border: 1px solid #deecf8;}
/* .owl-thumbs {position: absolute; bottom: 0; left: 0; display: table; width: 100%; text-align: center; padding: 5%;} */
.owl-thumbs {display: table; width: 100%; text-align: center; padding:2% 5%;}
.owl-thumb-item {display: table-cell; border: none; background: none; padding: 0; opacity: .6;}
.owl-thumb-item.active {opacity: 1;}

.project-deets-copy{padding: 25px; background: rgb(222 236 248 / 12%); border-radius: 16px; float: left; border: 1px solid rgb(222 236 248 / 32%);}
.project-deets-copy h6{text-transform: none; }
.project-deets-copy h6 span {font-size: inherit; color: inherit;}
.project-descrip-deets{}
.project-descrip-deets h3{width: 100%; height: auto; float: left;}
.project-descrip-deets h6{width: 100%; height: auto; float: left; text-transform: none; border-bottom: 1px solid rgb(255 255 255 / 23%); padding-bottom: 10px; margin-bottom: 20px; }
.project-descrip-deets h6 span {font-size: inherit; color: inherit;}
.project-deets-copy-2{ height: auto; float: left;}
.project-deets-pg-banner-gradient h2{width: 100%; height: auto; float: left; padding: 0 0 10px 0; margin: 0 0 30px 0; border-bottom: 1px solid rgb(52 72 90 / 60%);}
.project-deets-pg-banner-gradient h2 a{background: #1d374a;}
.project-deets-copy-2 h6{font-size: 14px; text-transform: none;}
.project-deets-copy-2 h6 span {font-size: 14px; color: inherit; text-transform: none;}
.project-deets-copy-2 p{padding-bottom: 20px;}

/* TEAM SEC CSS */
.team-member {margin: 15px 0; padding: 0;}
.team-member figure {position: relative; overflow: hidden; padding: 0; margin: 0; border-radius: 16px;}
.team-member figure img {min-width: 100%;}
.team-member figcaption p {color: #deecf8; font-size: 14px;}
.team-member figcaption h5 {color: #deecf8; padding-top: 30px;}
.team-member figcaption ul {list-style: none; margin: 0;padding: 0;}
.team-member figcaption ul {visibility: visible; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;}
.team-member figcaption ul li {display: inline-block; padding: 10px;}
.team-member figcaption ul li a i{color: #ffffff; font-size: 16px;}
.team-member h4 {margin: 20px 0 0 0; padding: 0; font-size: 28px; line-height: 34px;}
.team-member p{font-size: 18px; color: rgb(226 226 226 / 58%);}
.team-member figcaption {padding: 30px; color: transparent; background-color: transparent; position: absolute; z-index: 996; bottom: 0; left: 0; width: 100%; height: 0; overflow: hidden; visibility: hidden; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.team-member figure:hover figcaption {visibility: visible; color: #fff; background: rgb(22 32 41 / 65%); height: 100%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.team-member figure:hover figcaption ul li a:hover {color: rgba(49, 49, 49, .97);}
.team-member figure img {-webkit-transform: scale(1) rotate(0) translateY(0); -moz-transform: scale(1) rotate(0) translateY(0); -o-transform: scale(1) rotate(0) translateY(0); -ms-transform: scale(1) rotate(0) translateY(0); transform: scale(1) rotate(0) translateY(0); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}
.team-member figure:hover img {-webkit-transform: scale(1.1) rotate(1deg) translateY(12px); -moz-transform: scale(1.1) rotate(1deg) translateY(12px); -o-transform: scale(1.1) rotate(1deg) translateY(12px); -ms-transform: scale(1.1) rotate(1deg) translateY(12px); transform: scale(1.1) rotate(1deg) translateY(12px); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;}
.services-sec{width: 100%; height: auto; float: left;}
.services-sec h2{width: 100%; height: auto; float: left; padding-bottom: 20px;}
.service-intro-copy{}
.service-intro-copy p{padding-bottom: 10px;}
.services-weoffer{width: 100%; height: auto; float: left; padding: 30px; background: #162028; border-radius: 16px; margin: 20px 0;}
.services-weoffer h1{padding-bottom: 0px;}
.services-weoffer h5{color: rgb(222 236 248 / 67%);}
.services-weoffer-copy {padding:0 20px;}
.services-weoffer-copy h4{padding-bottom: 10px;}
.services-weoffer-copy h5{padding-bottom: 10px;}
.services-weoffer-copy p{padding-bottom: 10px;}
.services-weoffer-copy ul{width: 100%; height: auto; float: left; border-top: 1px solid #4f6373; margin: 10px 0 0 0; padding: 10px 0 0 0;}
.services-weoffer-copy ul li{width: auto; height: auto; float: left; padding: 5px 10px;margin: 0 5px 5px 0; border: 1px solid #4f6373; border-radius: 26px; font-size: 12px; color:rgb(207 212 220 / 66%); text-transform: none; font-weight: normal;}
.img-wrapper {overflow: hidden; border-radius: 16px;}
.inner-img {width: 100%; transition: 0.3s; border-radius: 16px;}
.inner-img:hover {transform: scale(1.1); }
.services-trueval{width: 100%; height: auto; float: left;}
.trueval-points{width: 100%; height: auto; float: left; padding: 20px; border-radius: 16px; background: #162029; border: 1px solid rgb(52 72 90 / 60%);}

/* Mouse scroll anim */
@-webkit-keyframes ani-mouse {
	0% {opacity: 1; top: 29%;}
	15% {opacity: 1; top: 50%;}
	50% {opacity: 0; top: 50%;}
	100% {opacity: 0; top: 29%;}
}
@-moz-keyframes ani-mouse {
	0% {opacity: 1; top: 29%;}
	15% {opacity: 1; top: 50%;}
	50% {opacity: 0; top: 50%;}
	100% {opacity: 0; top: 29%;}
}
@keyframes ani-mouse {
	0% {opacity: 1; top: 29%;}
	15% {opacity: 1; top: 50%;}
	50% {opacity: 0; top: 50%;}
	100% {opacity: 0; top: 29%;}
}
.scroll-btn {display: block; position: absolute; left: 0; right: 0; bottom: 30px; z-index: 1; text-align: center;}
/* .scroll-btn > * {display: inline-block; line-height: 18px; font-size: 13px; font-weight: normal; color: #7f8c8d; color: #ffffff; font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 2px;} */
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *.active {color: #ffffff;}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *:active,
.scroll-btn > *.active {opacity: 0.8; filter: alpha(opacity=80);}
.scroll-btn .mouse {position: relative; display: block; width: 35px; height: 55px; margin: 0 auto 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 3px solid white;	border-radius: 23px; background: rgb(0 0 0 / 34%)}
.scroll-btn .mouse > * {position: absolute; display: block; top: 29%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: white; border-radius: 50%; -webkit-animation: ani-mouse 2.5s linear infinite; -moz-animation: ani-mouse 2.5s linear infinite; animation: ani-mouse 2.5s linear infinite;}

.pragathi-team-img{padding: 16em 4em 6em 4em; margin: 80px 0 0 0; background: url("../images/pragathi_team.jpg") no-repeat; background-size: cover; border-radius: 16px;}
.pragathi-team-img h3{padding-bottom: 30px;}
.pragathi-team-img p{padding-bottom: 15px;}
.testimo-box{float: left; padding: 30px; border-radius: 16px; background: #382b3d;}
.testimo-box h1{padding-bottom: 30px; color: rgb(222 236 248 / 67%);}
.testimo-box h4{padding-bottom: 50px;}
.testimo-img-box{width: 100%; height: auto; float: left; background: #271f2a; border-radius: 16px; padding: 15px;}
.testimo-img-box img{border-radius: 16px;}
.testimo-img-box span{font-size: 14px; color:rgb(222 236 248 / 58%);}
.about-intro-testimo{width: 100%; height: 40vh;}
.about-intro-testimo h4{width: 85%; height: auto; float: none; margin: 0px auto; font-size: 22px; font-style: italic; text-align: center; vertical-align: middle; line-height: 36px; padding-bottom: 30px;}
.about-intro-testimo h4 label {color: #cf1343; margin: 0 0 0 0;}
.about-intro-testimo h6{width: 100%; height: auto; float: left; text-align: center; color:rgb(222 236 248 / 58%); padding: 0 0 0 0;}
.about-intro-testimo span{width: 100%; height: auto; float: left; text-align: center; font-size: 14px; color:rgb(222 236 248 / 58%); line-height: normal;}

/* ============
logo slider
======= */
.slick-slide {margin: 0px 0px;}
.slick-slide img {width: 70%;}
.slick-slider {position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent;}
.slick-list {position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
.slick-list:focus {outline: none;}
.slick-list.dragging {cursor: pointer; cursor: hand;}
.slick-slider .slick-track,
.slick-slider .slick-list {transform: translate3d(0, 0, 0);}
.slick-track {position: relative; top: 0; left: 0; display: block;}
.slick-track:before,
.slick-track:after {display: table; content: "";}
.slick-track:after {clear: both;}
.slick-loading .slick-track {visibility: hidden;}
.slick-slide {display: none; float: left; height: 100%; min-height: 1px;}
[dir=rtl] .slick-slide {float: right;}
.slick-slide img {display: block;}
.slick-slide.slick-loading img {display: none;}
.slick-slide.dragging img {pointer-events: none;}
.slick-initialized .slick-slide {display: block;}
.slick-loading .slick-slide {visibility: hidden;}
.slick-vertical .slick-slide {display: block; height: auto; border: 1px solid transparent;}
.slick-arrow.slick-hidden {display: none;}
.client-slider {width: 100%; height: auto; float: left; padding: 0 0 50px 0;}
.client-slider .slide img:hover{opacity: 0.6;}

.team-intro-cta{width: 100%; height: auto; text-align: center; float: left; padding: 0 0 0 0; border-radius:16px;}
/* background: #102538; background: linear-gradient(180deg, rgba(16, 37, 56, 0) 0%, rgba(11, 19, 25, 1) 87%); */
.team-intro-wrapper img{width: 100%; height: auto; border-radius: 16px;}
.team-intro-wrapper h2 {padding: 0em 3em 0.5em 3em;}
.team-intro-wrapper p {padding: 1em 10em 0.5em 10em;}