/*
Author       : Themes_mountain
Template Name: Helen - Creative Resume Template
Version      : 1.0
*/
/*=============================================================
    CSS INDEX
    =============================
    01. GENERAL STYLE (body, link color, section-title, preloader btn, overlay, section-padding etc)
    02. START BOOTSTRAP NAVIGATION OVERRIDES
    03. START HOME DESIGN
    04. START ABOUT DESIGN
    05. START PROGRESS BAR DESIGN
    06. START PORTFOLIO DESIGN
    07. START SERVICE DESIGN
    08. START TIMELINE DESIGN  
    09. START PRICING DESIGN   
    10. START PARTNER DESIGN   
    11. START TESTIMONIAL DESIGN   
    12. START COUNTER DESIGN   
    13. START BLOG DESIGN   
    14. START CONTACT ADDRESS DESIGN    
=============================================================*/

/*
* ----------------------------------------------------------------------------------------
* 01.GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/


body{
font-family: 'Poppins', sans-serif;
font-size: 14px;
line-height: 24px;
font-weight: 400;
background:#f7f7f7;
color:#666;
line-height: 25px;
overflow-x: hidden;
}
a:link,
a:visited,
a:foucs {
    color: #fff;
    text-decoration: none;
}
a { outline: none !important }
a:hover { text-decoration: none }
h1,
h2,
h3,
h4,
h5,
h6 {
color: #333;
font-family: montserrat,sans-serif;
font-weight: 400;
letter-spacing: 0;
margin-top: 0;
}
p {
    margin-bottom: 0;
}
.no-padding { padding: 0 }
/*START PRELOADER DESIGN*/
/*START PRELOADER DESIGN*/
.preloader {
	background:#fff;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;	
}
.spinner {
	width: 50px;
	height: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
	font-size: 10px;
	text-indent: -12345px;
	z-index: 10000;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #f75799;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
/*END PRELOADER DESIGN*/
.section-padding{padding:40px 0}

.section-title {
	margin-bottom: 50px;
	position: relative;
	padding-bottom: 20px;
}

h1.section-title {
	text-transform: uppercase;
	text-align: center;
	font-weight: 700;
	font-size: 32px;
	color: #333;
	letter-spacing: 1px;
}

h1.section-title::after {
	content: "";
	background: #f75799;
	height: 4px;
	width: 80px;
	display: block;
	margin: 15px auto 0;
	border-radius: 2px;
}

h1.section-title::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 200px;
	height: 1px;
	background: linear-gradient(to right, transparent, #f75799, transparent);
}
/*START SCROLL TO TOP*/
.topcontrol {
background: #fff none repeat scroll 0 0;
border-radius: 30px;
bottom: 5px;
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
color: #f75799;
cursor: pointer;
font-size: 18px;
height: 50px;
line-height: 50px;
opacity: 1;
position: fixed;
right: 5px;
text-align: center;
transition: all 0.2s ease 0s;
width: 50px;
}
.topcontrol:hover {
    background: #f75799;
    color: #fff;
}
/*END SCROLL TO TOP*/
/*
* ----------------------------------------------------------------------------------------
* 01.END GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 02.START BOOTSTRAP NAVIGATION OVERRIDES
* ----------------------------------------------------------------------------------------
*/
.navbar-default {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    width: 100%;
    padding: 20px 0;
    background: #fff;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
    color: #f75799 !important;
    background-color: transparent;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
    color: #f75799 !important;
    background-color: transparent;
}
.navbar-nav {
	text-align:center;
  float: none;
  margin: 7px 0 0;
}
.navbar-nav > li {
	display: inline-block;
	float: none;
}
.navbar-brand {
height: auto;
padding: 0;
 }
.navbar-brand img {
padding-top: 5px;
width: 150px;
}
@media only screen and (max-width:768px) { 
.navbar-brand img {
    margin-left: 10px;
}
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form { border-color: #f75799 }
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: #fff;
margin-top: 0px;
}
.menu-top {background: rgba(0, 0, 0, 0) none repeat scroll 0 0;}
.navbar-default .navbar-nav > li > a {
  color: #fff;
}
.menu-top li a {
	color: #333 !important;
	font-size: 12px;
	font-weight:600;
	text-transform: uppercase;
	font-family: montserrat,sans-serif;
	transition: 0.2s;
}
.menu-top li a:hover { color: #fff!important }
.navbar-default.menu-shrink {
    background-color: #fff;
   box-shadow: -1px 10px 10px rgba(0, 0, 0, 0.03);
    padding: 10px 0;
    width: 100%;
}
.navbar-default.menu-shrink {background-color: #fff;}
.navbar-default.menu-shrink li a { color:#333 !important; }
.navbar-default.menu-shrink li a:hover { color: #f75799 !important }
.navbar-default .navbar-toggle { background: #fff none repeat scroll 0 0 }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background-color: #fff }
.navbar-default .navbar-toggle .icon-bar { background-color: #f75799 }

@media only screen and (max-width:768px) { 
    .navbar-default .navbar-nav > li > a {
        margin-top: 10px;
        padding: 8px;
		color:#333  !important 
    }
}
@media only screen and (max-width:768px) { 
.navbar-default.menu-shrink li a {color:#333!important;}
}
@media only screen and (max-width:480px) { 
.menu-top { background-color: #fff;color: #333 !important;margin-left: 0px; }
.navbar-default .navbar-nav > li > a {color:#333  !important }
.navbar-default.menu-shrink li a { color: #333 !important }
.navbar-default.menu-shrink li a:hover { color: #f75799 !important }
.navbar-default.menu-shrink {background: #fff!important;}
}
/*
* ----------------------------------------------------------------------------------------
* 02.END BOOTSTRAP NAVIGATION OVERRIDES
* ----------------------------------------------------------------------------------------
*/


/*
* ----------------------------------------------------------------------------------------
* 03.START HOME DESIGN
* ----------------------------------------------------------------------------------------
*/
.home_info{}
.home_info_bg{
	background:#fff;
	margin-top:100px;
	padding:50px;
}
.profile-pic{margin-top:-20px;}

@media only screen and (max-width:768px) { 
.profile-pic img {width: 100%;}
}
.social_profile {
	margin-top: 20px;
}
.social_profile ul{
list-style: outside none none;
margin: 0;
padding: 0;
text-align: center;
}
.social_profile ul li{
display: inline-block;
}
@media only screen and (max-width:480px) { 
.social_profile ul li{margin:2px;}
}
.social_profile ul li a img{width:60px;}
.social_profile ul li a {
	display: block;
	text-align: center;
	text-transform: uppercase;
	transition: all 0.3s ease 0s;
	margin-right: 10px;
	color: #333;
	font-size: 16px;
	width: 45px;
	height: 45px;
	line-height: 45px;
	border: 1px solid #eee;
	border-radius: 30px;
	transition: 0.3s;
}
@media only screen and (max-width:480px) { 
.social_profile ul li a {margin-right:5px;}
}
@media only screen and (max-width:414px) { 
.social_profile ul li a {width: 35px;height: 35px;line-height: 35px;}
}
.social_profile ul li a:hover{
background:#f75799;
color:#fff;
border: 1px solid #f75799;
}
.name_title {
	margin-bottom: 40px;
	border-bottom: 1px solid #ddd;
	padding-bottom:20px;
}
@media only screen and (max-width:768px) { 
.name_title {margin-top: 60px;}
}
.name_title h1{}
@media only screen and (max-width:414px) { 
.name_title h1 {font-size:30px; }
}
.name_title h1 span{
font-weight:700;	
color:#f75799;
}
.name_title h4{margin-bottom:0px;}


.info_title {
	text-transform: uppercase;
	font-weight: 600;
	font-size: 16px;
}
.info_title::after {
	content: "";
	background: #f75799;
	height: 2px;
	width: 45px;
	display: block;
	margin-top: 10px;
	margin-bottom: 25px;
}

.basic-info{}
.basic-info table tr th {
	color: #333;
	font-family: montserrat,sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 35px;
	text-transform: uppercase;
}
.contact_info{margin-top:130px;}
@media only screen and (max-width:480px) { 
.basic-info table tr {
	margin-bottom: 10px;
	display: inline-block;
}
.contact_info{margin-top:50px;}
}
.basic-info table tr th{width:120px;}
}

@media only screen and (max-width:768px) { 
.contact_info{margin-top:60px;}
}
.contact_info p{line-height: 35px;}
/*
* ----------------------------------------------------------------------------------------
* 03.END HOME DESIGN
* ----------------------------------------------------------------------------------------
*/


/*
* ----------------------------------------------------------------------------------------
* 04.START ABOUT DESIGN
* ----------------------------------------------------------------------------------------
*/

.about-me{}
.about-bg{margin: 60px 0;background:#fff;padding:50px;}
@media only screen and (max-width:768px) { 
.about-info{margin-bottom:60px;}
}
.about-info p {
	margin-bottom: 30px;
	padding-right: 30px;
}
.about-info a {
	background: #fff;
	border: 2px solid #333;
	padding: 10px 30px;
	display: inline-block;
	border-radius: 30px;
	transition: 0.2s;
	color: #333;
	font-weight: 400;
	text-transform: capitalize;
}
.about-info a i{margin-left:5px;}
.about-info a:hover{
	background: #f75799;
	border: 2px solid #f75799;	
	color: #fff;
}
/*
* ----------------------------------------------------------------------------------------
* 04.END ABOUT DESIGN
* ----------------------------------------------------------------------------------------
*/


/*
* ----------------------------------------------------------------------------------------
* 05.START PROGRESS BAR DESIGN
* ----------------------------------------------------------------------------------------
*/
.progress-bg {
	background: #fff;
	padding: 50px;
	margin-bottom: 50px;
	padding-bottom: 20px;
}
.progress-title{
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 20px;
}
.progress{
    height: 7px;
    background: #f5f5f5;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 30px;
    overflow: visible;
    position: relative;
}
.progress .progress-bar{
    border: 1px solid #f75799;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    animation: animate-positive 5s;
}
.progress .progress-bar:after{
    content: "";
    width: 20px;
    height: 20px;
    background: #f75799;
    border: 6px double #fff;
    outline: 2px solid #f75799;
    position: absolute;
    top: -6px;
    right: 0;
}
.progress.red .progress-bar:after{
    background: #f75799;
    outline: 2px solid #f75799;
}
@-webkit-keyframes animate-positive{
    0% { width: 0; }
}
@keyframes animate-positive{
    0% { width: 0; }
}
/*
* ----------------------------------------------------------------------------------------
* 05.END PROGRESS BAR DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 06.START PORTFOLIO DESIGN
* ----------------------------------------------------------------------------------------
*/
.portfolio-bg{
	background: #fff;
	padding: 50px;
	margin-bottom: 50px;
	padding-bottom: 20px;
}
@media only screen and (max-width:414px) { 
.portfolio-bg{padding: 50px 15px;}
}
.portfolio-filters { margin-bottom: 60px }
.portfolio-filters li.active {
color: #fff;
background:#f75799;
border: 1px solid #f75799;
}
.portfolio-filters li {
	border: 1px solid #eee;
	border-radius: 30px;
	color: #233142;
	cursor: pointer;
	display: inline-block;
	font-weight: 400;
	margin-right: 5px;
	padding: 8px 40px;
	text-transform: capitalize;
	transition: all 0.4s ease 0s;
	font-size: 14px;
}
@media only screen and (max-width:768px) { 
    .portfolio-filters li { padding: 8px 24px;margin-bottom: 10px }
}
.portfolio-filters li:hover {
    color: #fff;
	background:#f75799;
border: 1px solid #f75799;
}
.grid {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}
.grid .mix {
    display: none;
    opacity: 0;
    filter: alpha(opacity=0);
    animation: fadeInOut 1s ease forwards;
    padding: 0 15px;
}
@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}
.grid .mix:nth-child(1) { animation-delay: 0.1s; }
.grid .mix:nth-child(2) { animation-delay: 0.3s; }
.grid .mix:nth-child(3) { animation-delay: 0.5s; }
.grid .mix:nth-child(4) { animation-delay: 0.7s; }
.grid .mix:nth-child(5) { animation-delay: 0.9s; }
.box{
    overflow: hidden;
    perspective: 800px;
    position: relative;
	margin-bottom:30px;
	height: 300px;
}
.box:after{
    content: "";
    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.6);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: rotateX(-90deg);
    transform-origin: 50% -50% 0;
    visibility: hidden;
    transition: all 0.6s ease-in-out 0s;
}
.box:hover:after{
    transform: rotateX(0deg);
    visibility: visible;
    opacity: 1;
}
.box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.box .box-content{
    width: 100%;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
    transform: translate(0%, 0%);
    transition: all 0.6s ease-in-out 0s;
}
.box:hover .box-content{
    opacity: 1;
    top: 50%;
    transform: translate(0%, -50%);
}
.box .box-content a {
	color: #f75799;
	margin-top: 10px;
	background: #fff;
	width: 50px;
	height: 50px;
	line-height: 50px;
	display: inline-block;
	border-radius: 30px;
	font-size: 18px;
	transition:0.2s;
}
.box .box-content a:hover{
background:#f75799;
color:#fff;
}
.box .title {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	margin-top: 0;
	text-transform: uppercase;
}
.box .post{
color: #fff;
font-size: 18px;
text-transform: capitalize;
}
.box .icon li{
    display: inline-block;
    margin-right: 5px;
    position: relative;
    transition: all 0.5s ease 0.3s;
}
.box .icon li:first-child{ left: -40%; }
.box .icon li:last-child{ right: -40%; }
.box:hover .icon li:first-child{ left: 0; }
.box:hover .icon li:last-child{ right: 0; }

@media only screen and (max-width:990px){
    .box{ margin-bottom: 30px; }
}

.view_more_btn {
  margin-top: 40px;
}
.btn-project-bg{
background: #f9461d none repeat scroll 0 0;
border: 1px solid #f9461d;
border-radius: 3px;
box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1);
color: #fff;
font-size: 16px;
padding: 14px 40px;
text-transform: uppercase;
transition: all 0.3s ease 0s;
}
.btn-project-bg:hover, .btn-project-bg:focus{
background:#233142;
border: 1px solid #233142;	
color: #fff;
}
/*project modal*/
.modal-title {
	color: #333;
	margin: 0;
	text-transform: uppercase;
	font-weight: 600;
}
.modal-content {
    padding: 10px 30px;
    border-radius: 0px;
}
.modal-body { margin-bottom: 15px }
.modal-body p { margin: 15px 0 0 }
.project-list { margin-top: 30px }
.project-list label {
	color: #233142;
	margin-bottom: 0;
	margin-right: 0;
	width: 120px;
}
.project-list li {
    padding: 7px 0;
    font-size: 14px;
}
.project-list li a {
    color: #233142;
    margin-bottom: 0;
    margin-right: 7px;
    width: 125px;
}
.project-list li a:hover { color: #f9461d; }
/*End project modal*/
/*
* ----------------------------------------------------------------------------------------
* 06.END PORTFOLIO DESIGN
* ----------------------------------------------------------------------------------------
*/


/*
* ----------------------------------------------------------------------------------------
* 07.START SERVICE DESIGN
* ----------------------------------------------------------------------------------------
*/
.service-bg {
	background: #f8f9fa;
	margin-bottom: 50px;
	padding: 60px 30px;
}

.service-bg .section-title {
	margin-bottom: 50px;
}

.service-bg .row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
	justify-content: center;
}

.service-bg .col-md-4 {
	padding: 15px;
	margin-bottom: 30px;
}

@media only screen and (max-width: 992px) {
	.service-bg .col-md-4 {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

@media only screen and (max-width: 576px) {
	.service-bg .col-md-4 {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.service-bg {
		padding: 40px 15px;
	}
}

.single_service {
	background: #fff;
	padding: 40px 30px;
	border: 1px solid #eee;
	border-radius: 8px;
	transition: all 0.3s ease;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	height: 100%;
	box-sizing: border-box;
}

@media only screen and (max-width:480px) {
.single_service {padding:30px 20px;}
}

.single_service:hover{
	background:#f75799;
	border-color: #f75799;
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(247, 87, 153, 0.3);
}

.single_service span {
	color: #f75799;
	font-size: 48px;
	display: block;
	margin-bottom: 25px;
	transition: all 0.3s ease;
}

.single_service:hover span{
	color:#fff;
	transform: scale(1.1);
}

.single_service h3 {
	font-weight: 600;
	font-size: 20px;
	padding-bottom: 15px;
	margin-bottom: 0;
	color: #333;
	transition: all 0.3s ease;
}

.single_service:hover h3{
	color:#fff;
}

.single_service p{
	margin-bottom: 0;
	color: #666;
	line-height: 1.6;
	transition: all 0.3s ease;
}

.single_service:hover p{
	color:#fff;
}

/*
* ----------------------------------------------------------------------------------------
* 07.END SERVICE DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 08.START TIMELINE DESIGN
* ----------------------------------------------------------------------------------------
*/
.timeline-bg{
	background: #fff;
	margin-bottom: 50px;
	padding: 50px;
	padding-bottom: 20px;	
}
.timeline_title {
	font-weight: 600;
	font-size: 20px;
	margin-bottom: 30px;
}
@media only screen and (max-width:768px) {
.timeline_title {margin-top: 30px;}
}
.single_timeline {
	background: #fff;
	border: 1px solid #eee;
	padding: 20px;
	box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.08);
	border-left: 2px solid #f75799;
	margin-bottom: 30px;
}
.single_timeline h4 {
	font-weight: 600;
	font-size: 18px;
	margin-bottom: 5px;
}
.single_timeline span {
	margin-bottom: 10px;
	display: inline-block;
}
.active_year{
color:#f75799;
font-weight: 600;
}
.active_company {
	opacity: 0.6;
}
.single_timeline p{}
/*
* ----------------------------------------------------------------------------------------
* 08.END TIMELINE DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 09.START PRICING DESIGN
* ----------------------------------------------------------------------------------------
*/
.pricing-bg {
	background: #f8f9fa;
	margin-bottom: 50px;
	padding: 60px 30px;
}

.pricing-bg .section-title {
	margin-bottom: 50px;
}

.pricing-bg .row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
	justify-content: center;
}

.pricing-bg .col-md-4 {
	padding: 15px;
	margin-bottom: 30px;
}

@media only screen and (max-width: 992px) {
	.pricing-bg .col-md-4 {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

@media only screen and (max-width: 576px) {
	.pricing-bg .col-md-4 {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.pricing-bg {
		padding: 40px 15px;
	}
}
.pricingTable {
	background-color: #fff;
	text-align: center;
	position: relative;
	transition: all 0.3s;
	border: 1px solid #eee;
	box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.05);
}
.pricingTable .pricingTable-header {
	padding: 20px;
	margin: 0 0 10px;
	position: relative;
	border-bottom: 1px solid #eee;
}
.pricingTable .title {
	font-size: 24px;
	font-weight: 500;
	text-transform: capitalize;
	margin: 0;
}
.pricingTable .price-label {
	color: #fff;
	background: #f75799;
	font-size: 16px;
	width: 100px;
	margin-bottom: 15px;
	display: block;
	-webkit-clip-path: polygon(100% 0%, 90% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
	clip-path: polygon(100% 0%, 90% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
}
.pricingTable .price-value{
    margin: 0 0 25px;
}
.pricingTable .amount {
	font-size: 50px;
	font-weight: 500;
	line-height: 35px;
	color: #333;
}
.pricingTable .month {
	font-size: 15px;
	font-weight: 400;
	display: block;
	color: #333;
}
.pricingTable .pricing-content{
    padding: 0;
    margin: 0;
    list-style: none;
}
.pricingTable .pricing-content li{
    font-size: 14px;
    line-height: 40px;
    text-transform: capitalize;
    border-bottom: 1px solid #eee;
}
.pricingTable .pricing-content li del{opacity:0.5;}
.pricingTable .pricing-content li:first-child{ border-top: 1px solid rgba(0,0,0,0.1); }
.pricingTable .pricing-content li:last-child{ border-bottom: none; }
.pricingTable .pricingTable-signup {
	color: #fff;
	background: #f75799;
	font-size: 16px;
	text-transform: capitalize;
	padding: 10px 30px;
	display: inline-block;
	position: relative;
	transition: all 0.3s;
	border-radius: 30px;
	margin-top: 15px;
	margin-bottom: 30px;
}
.pricingTable .pricingTable-signup:hover{}
@media only screen and (max-width: 990px){
    .pricingTable{ margin: 0 0 30px; }
}
/*
* ----------------------------------------------------------------------------------------
* 09.END PRICING DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 10.START PARTNER DESIGN
* ----------------------------------------------------------------------------------------
*/
.partner-bg {
	background: #f8f9fa;
	padding: 60px 30px;
	margin-bottom: 50px;
}

.partner-bg .section-title {
	margin-bottom: 50px;
}

.partner-bg .row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
	justify-content: center;
}

.partner-bg .col-md-6 {
	padding: 15px;
	margin-bottom: 30px;
}

@media only screen and (max-width: 768px) {
	.partner-bg .col-md-6 {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.partner-bg {
		padding: 40px 15px;
	}
}

.partner{text-align:center;}

.partner.owl-theme .owl-controls {display: none!important;}
/*
* ----------------------------------------------------------------------------------------
* 10.END PARTNER DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 11.START TESTIMONIAL DESIGN
* ----------------------------------------------------------------------------------------
*/
.testimonial-bg{
	background: #fff;
	padding: 50px;
	margin-bottom: 50px;
}
.testimonial{
    text-align: center;
}
.testimonial .testimonial-content{}
.testimonial .pic{
    display: inline-block;
    width: 100px;
    height: 100px;
	border-radius: 100px;
    border: 2px solid #f75799;
    margin-bottom: 20px;
}
.testimonial .pic img{
    width: 100%;
    height: auto;
	border-radius: 100px;
}
.testimonial .description {
	margin: auto;
	text-align: center;
	width: 90%;
	margin-bottom: 25px;
	font-size: 18px;
	line-height: 30px;
}
.testimonial .test-content {}
.testimonial .title {
	display: inline-block;
	font-size: 20px;
	color: #333;
	text-transform: capitalize;
	margin: 0;
	font-weight: 600;
}
.testimonial .post{
    display: inline-block;
    font-size: 15px;
}

.owl-theme .owl-controls {
    margin-top: 40px;
    text-align: center;
}
.owl-theme .owl-controls .owl-page { display: inline-block }
.owl-controls .owl-page,
.owl-controls .owl-buttons div { cursor: pointer }
.owl-theme .owl-controls .owl-page span {
background-color: #f75799 !important;
border-radius: 20px;
display: block;
height: 12px;
margin: 5px 7px;
width: 12px;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span { background-color: #fff }
.owl-theme .owl-controls {
  display: block !important;
}
/*
* ----------------------------------------------------------------------------------------
* 11.END TESTIMONIAL DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 12.START COUNTER DESIGN
* ----------------------------------------------------------------------------------------
*/
.counter_bg {
	background: #fff;
	padding: 50px;
	margin-bottom:50px;
}

.single-project-complete{
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-right: 1px solid rgba(0, 0, 0, 0.1);
text-align: center;  
}
@media only screen and (max-width:480px) { 
.single-project-complete{
border-bottom: 0px;
border-right: 0px;
margin-bottom:30px;
}
}
.brnone{border-right: 0px ;}
.single-project-complete h2 {
font-size: 45px;
font-weight:700;
}
.single-project-complete h2::after {
border-bottom: 1px solid #f75799;
border-top: 1px solid #f75799;
content: "";
display: block;
height: 4px;
margin: 20px auto;
width: 70px;
}
.single-project-complete i{
display: block;
font-size: 34px;
color: #f75799;
margin-bottom: 15px;	
}
.single-project-complete h3 {
font-size: 15px;
font-weight:600;
margin-bottom: 20px;
margin-top: 0;
text-transform: uppercase;
}
/*
* ----------------------------------------------------------------------------------------
* 12.END COUNTER DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 13.START BLOG DESIGN
* ----------------------------------------------------------------------------------------
*/

.blog-bg{
	background: #fff;
	padding: 50px;
	margin-bottom:50px;
}
@media only screen and (max-width:480px) { 
.blog-bg{padding-bottom:20px;}
}
.single-blog {
    background: #fff none repeat scroll 0 0;
     box-shadow:0 8px 20px rgba(0, 0, 0, 0.05);
    -webkit-transition: all 0.2s ease 0s;
            transition: all 0.2s ease 0s;
}
@media only screen and (max-width:480px) { 
    .single-blog { margin-bottom: 40px }
}
.single-img {
    position: relative;
    width: 100%;
}
.post-date {
    background: #fff none repeat scroll 0 0;
    display: inline-block;
    left: 0;
    padding: 15px;
    position: absolute;
    top: 5%;
}
.post-date h4 {
	color: #333;
	margin: 0;
	text-align: center;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 12px;
}
.blog-social {
    background: #fff none repeat scroll 0 0;
    bottom: 5%;
    display: inline-block;
    padding: 20px;
    position: absolute;
    left: 0;
}
.blog-social h4 {
	border-bottom: 1px solid #ddd;
	margin-top: 0;
	padding: 5px;
	text-align: center;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 600;
}
.blog-social ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.blog-social ul li { float: left }
.blog-social ul li a { }
.blog-social ul li a i {
	color: #fff;
	font-size: 12px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	-webkit-transition: all 0.2s ease 0s;
	transition: all 0.2s ease 0s;
	width: 30px;
}
.blog-social ul li a i:hover {
    background: #f75799;
    color: #fff;
}
.facebook { background: #5D82D1 }
.twitter { background: #40BFF5 }
.instagram { background: #D22E83 }
.linkedin { background: #238CC8 }
.single_blog_dsc { padding:40px }
.single_blog_dsc h3 {
	color: #333;
	display: block;
	font-size: 18px;
	margin: 0;
	padding-bottom: 15px;
	text-transform: uppercase;
	-webkit-transition: all 0.4s ease 0s;
	transition: all 0.4s ease 0s;
	font-weight: 600;
}
.single_blog_dsc h3 a:hover { color: #f75799 }
.single_blog_dsc p {
    margin-bottom: 10px;
}

.single_blog_dsc a {
	background: #fff none repeat scroll 0 0;
	border-radius: 30px;
	color: #333;
	display: inline-block;
	font-size: 14px;
	font-weight: 400;
	/* letter-spacing: 0.5px; */
	outline: medium none;
	padding: 8px 30px;
	text-transform: capitalize;
	transition: all 0.2s ease 0s;
	margin-top: 20px;
	border: 2px solid #333;
}
.single_blog_dsc a:hover,
.single_blog_dsc a:focus {
    background: #f75799;
	border: 2px solid #f75799;
    color: #fff;
}
/*
* ----------------------------------------------------------------------------------------
* 13.END BLOG DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 14.START CONTACT ADDRESS DESIGN
* ----------------------------------------------------------------------------------------
*/
.contact-bg{
	background: #fff;
	padding: 50px;
	margin-bottom:50px;	
}
.contact{}
@media only screen and (max-width:768px) { 
    .contact {margin-bottom:60px }
}
.contact input {
	background: none repeat scroll 0 0;
	border-bottom: 1px solid #eee;
	border-radius: 0px;
	box-shadow: none;
	color: #333;
	font-size: 16px;
	font-weight: 400;
	height: 50px;
	width: 100%;
	border-right: 0px;
	border-top: 0px;
	border-left: 0px;
}
.contact textarea {
background:none repeat scroll 0 0;
border-bottom: 1px solid #eee;
border-radius: 0px;
box-shadow: none;
color: #333;
padding: 10px;
width: 100%;
font-size:16px;
border-right: 0px;
border-top: 0px;
border-left: 0px;
font-weight: 400;
}
.contact input:hover, .contact input:focus {
border-bottom: 1px solid #f75799 ;
    box-shadow: none;
    outline: 0 none;
}
.contact textarea:hover, .contact textarea:focus {
border-bottom: 1px solid #f75799 ;
    box-shadow: none;
    outline: 0 none;
}
.btn-contact-bg {
	background: #fff none repeat scroll 0 0;
	border-radius: 30px;
	color: #333;
	display: iinline-block;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.5px;
	outline: medium none;
	padding: 11px 30px;
	/* width: 100%; */
	text-transform: capitalize;
	transition: all 0.2s ease 0s;
	border: 2px solid #333;
}
.btn-contact-bg:hover,
.btn-contact-bg:focus {
    background: #f75799;
	border: 2px solid #f75799;
    color: #fff;
}
.map{}
.map iframe{
width:100%;
height:430px;
}
.footer{margin-bottom:50px;}
.footer p{
text-align:center;
}
/*
* ----------------------------------------------------------------------------------------
* 14.END CONTACT ADDRESS DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 15.INTELLECTUAL PROPERTIES DESIGN
* ----------------------------------------------------------------------------------------
*/
.ip-item {
    margin-bottom: 30px;
    text-align: center;
    cursor: pointer;
}
.ip-image {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 20px;
    border: 2px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
.ip-image:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 12px rgba(247, 87, 153, 0.3);
    border-color: #f75799;
}
.ip-description {
    padding: 0 15px;
}
.ip-description h4 {
    color: #f75799;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.ip-description p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 8px;
}
.ip-description strong {
    color: #333;
    font-size: 13px;
}
@media only screen and (max-width: 768px) {
    .ip-image {
        max-width: 300px;
    }
}
/*
* ----------------------------------------------------------------------------------------
* 15.END INTELLECTUAL PROPERTIES DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 16.CERTIFICATIONS DESIGN
* ----------------------------------------------------------------------------------------
*/
.cert-item {
    margin-bottom: 30px;
    text-align: center;
    transition: all 0.3s ease;
}
.cert-item:hover {
    transform: translateY(-5px);
}
.cert-image {
    width: 100%;
    max-width: 350px;
    height: 250px;
    object-fit: cover;
    border: 3px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
.cert-image:hover {
    border-color: #f75799;
    box-shadow: 0 6px 12px rgba(247, 87, 153, 0.2);
}
.cert-title {
    margin-top: 15px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
}
@media only screen and (max-width: 768px) {
    .cert-image {
        max-width: 280px;
        height: 200px;
    }
}
/*
* ----------------------------------------------------------------------------------------
* 16.END CERTIFICATIONS DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 17.INTERACTIVE 3D EFFECTS
* ----------------------------------------------------------------------------------------
*/

/* Particle Background Effect */
body {
    position: relative;
    overflow-x: hidden;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -2;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(247, 87, 153, 0.02) 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, rgba(100, 150, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: particleMove 20s linear infinite;
}

@keyframes particleMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}

/* Floating 3D Background Elements */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    background: 
        radial-gradient(circle at 20% 30%, rgba(247, 87, 153, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(100, 150, 255, 0.05) 0%, transparent 50%);
}

.floating-shape {
    position: fixed;
    pointer-events: none;
    z-index: -1;
    opacity: 0.1;
    animation: float 20s infinite ease-in-out;
}

.floating-shape:nth-child(1) {
    top: 10%;
    left: 10%;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #f75799, #ff8ec7);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    animation-delay: 0s;
}

.floating-shape:nth-child(2) {
    top: 60%;
    right: 15%;
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, #6496ff, #8ec5ff);
    border-radius: 50%;
    animation-delay: 5s;
}

.floating-shape:nth-child(3) {
    bottom: 20%;
    left: 20%;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ffd93d, #ffed4e);
    border-radius: 20%;
    animation-delay: 10s;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(30px, -30px) rotate(90deg);
    }
    50% {
        transform: translate(-20px, 20px) rotate(180deg);
    }
    75% {
        transform: translate(20px, 30px) rotate(270deg);
    }
}

/* Enhanced Portfolio Hover Effects */
.box {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.box:hover {
    box-shadow: 0 15px 30px rgba(247, 87, 153, 0.3);
}

.box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(247, 87, 153, 0.8), rgba(100, 150, 255, 0.8));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.box:hover::before {
    opacity: 1;
}

.box .box-content {
    z-index: 2;
    transition: all 0.3s ease;
}

.box:hover .box-content {
    transform: translate(0%, -50%);
}

.box .box-content a {
    transition: all 0.3s ease;
}

.box .box-content a:hover {
    transform: scale(1.1);
    background: #fff;
    color: #f75799;
}

/* Enhanced Service Cards Hover */
.single_service {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.single_service:hover {
    box-shadow: 0 10px 25px rgba(247, 87, 153, 0.2);
}

.single_service span {
    transition: all 0.3s ease;
}

.single_service:hover span {
    transform: scale(1.1);
}

/* Certification Cards Hover */
.cert-item {
    transition: all 0.3s ease;
    cursor: pointer;
}

.cert-item:hover {
    box-shadow: 0 10px 25px rgba(247, 87, 153, 0.2);
}

.cert-image {
    transition: all 0.3s ease;
}

.cert-item:hover .cert-image {
    transform: scale(1.03);
    box-shadow: 0 15px 30px rgba(247, 87, 153, 0.3);
}

/* IP Items Hover */
.ip-item {
    transition: all 0.4s ease;
    cursor: pointer;
}

.ip-item:hover {
    transform: scale(1.02);
}

.ip-item:hover .ip-image {
    box-shadow: 0 10px 30px rgba(247, 87, 153, 0.3);
    border-color: #f75799;
}

/* Button Hover Effects */
.btn-contact-bg {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-contact-bg::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-contact-bg:hover::before {
    width: 300px;
    height: 300px;
}

.btn-contact-bg:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(247, 87, 153, 0.3);
}

/* Navbar Hover Effects */
.navbar-nav > li > a {
    transition: all 0.3s ease;
    position: relative;
}

.navbar-nav > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #f75799;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.navbar-nav > li > a:hover::after {
    width: 80%;
}

.navbar-nav > li > a:hover {
    color: #f75799;
    transform: translateY(-2px);
}

/* Timeline Hover Effects */
.single_timeline {
    transition: all 0.3s ease;
}

.single_timeline:hover {
    transform: translateX(10px);
    background: rgba(247, 87, 153, 0.05);
    border-radius: 10px;
}

/* Social Icons Hover */
.social_profile ul li a {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.social_profile ul li a:hover {
    transform: translateY(-5px) rotate(360deg);
    background: #f75799;
    color: #fff;
}

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
    .floating-shape {
        display: none;
    }
}

/* Smooth Scroll Effect */
html {
    scroll-behavior: smooth;
}

/* Section Fade In Animation */
section, .about-me, .service-area, .timeline-area, .pricing-area, .partner-logo, .contact_us {
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced Image Hover */
.img-responsive {
    transition: all 0.4s ease;
}

.img-responsive:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/* Profile Picture 3D Effect */
.profile-pic {
    transition: all 0.4s ease;
    transform-style: preserve-3d;
}

.profile-pic:hover {
    transform: rotateY(10deg) rotateX(5deg) scale(1.05);
}

.profile-pic img {
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.profile-pic:hover img {
    box-shadow: 0 20px 50px rgba(247, 87, 153, 0.4);
}

/* Enhanced Modal Animation */
.modal.fade .modal-dialog {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: scale(0.7) translateY(-50px);
    opacity: 0;
}

.modal.fade.in .modal-dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Interactive Form Inputs */
.form-control {
    transition: all 0.3s ease;
    border: 2px solid #eee;
}

.form-control:focus {
    border-color: #f75799;
    box-shadow: 0 0 0 3px rgba(247, 87, 153, 0.1);
    transform: translateY(-2px);
}

/* Progress Bar Animation */
.progress-bar {
    transition: width 2s ease-in-out;
    background: linear-gradient(90deg, #f75799, #ff8ec7);
    position: relative;
    overflow: hidden;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Section Title Hover Effect */
.section-title {
    transition: all 0.3s ease;
}

.section-title:hover {
    color: #f75799;
    transform: scale(1.02);
}

/* Enhanced Social Profile */
.social_profile ul li {
    transition: all 0.3s ease;
}

.social_profile ul li:hover {
    transform: translateY(-5px);
}

/* Footer Hover Effect */
.footer p {
    transition: all 0.3s ease;
}

.footer p:hover {
    color: #f75799;
    transform: scale(1.05);
}

/* Enhanced Timeline Hover */
.single_timeline {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.single_timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(247, 87, 153, 0.1), transparent);
    transition: left 0.5s ease;
}

.single_timeline:hover::before {
    left: 100%;
}

/* Certification Badge Effect */
.cert-item {
    position: relative;
}

.cert-item::before {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: #f75799;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cert-item:hover::before {
    opacity: 1;
    transform: scale(1);
}

/* Certificate Zoom Modal */
.cert-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    animation: fadeIn 0.3s ease;
}

.cert-modal-content {
    margin: auto;
    display: block;
    width: 90%;
    max-width: 900px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.cert-modal-img {
    width: 100%;
    height: auto;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
    animation: zoomIn 0.3s ease;
}

.cert-modal-close {
    position: absolute;
    top: 20px;
    right: 40px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100000;
}

.cert-modal-close:hover {
    color: #f75799;
    transform: scale(1.2);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.5);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media only screen and (max-width: 768px) {
    .cert-modal-content {
        width: 95%;
    }
    
    .cert-modal-close {
        right: 20px;
        top: 10px;
        font-size: 30px;
    }
}

/*
* ----------------------------------------------------------------------------------------
* 17.END INTERACTIVE 3D EFFECTS
* ----------------------------------------------------------------------------------------
*/