/* 
============================================================
CSS Index
============================================================
1. Theme default css
2. Top Nav bar
3. Header Nav bar
4. Services
5. About
6. Portfolio
7. Counter
8. Team
9. Pricing
10. Testimonail
11. Blog
12. Contact
13. Footer
14. ScrollUp 
15. Inner page bannar 
16. Index02 hero 
17. Index04 hero particles 
18. Index05 hero left-text
19. Index05 hero left-text 
20. keyframes
*/



/* ==============================================================
                    1.Theme default css 
=================================================================*/
:root{
    --main : #ff463a;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    font-style: normal;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    background-color: #fff;
}

img {
    max-width: 100%;
    transition: all 0.3s ease-out 0s;
}

.f-left {
    float: left
}

.f-right {
    float: right
}

.fix {
    overflow: hidden
}

a,
.button {
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

a:focus,
.button:focus {
    text-decoration: none;
    outline: none;
}

a:focus,
a:hover {
    color: var(--main);
    text-decoration: none;
}

a,
button {
    color: #333;
    outline: medium none;
}

button:focus,
input:focus,
input:focus,
textarea,
textarea:focus {
    outline: 0
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:'Roboto', sans-serif;
    font-weight: normal;
    color: #333;
    margin-top: 0px;
    font-style: normal;
    font-weight: 400;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: #212058;
}

h1 {
    font-size: 56px;
    font-weight: 600;
}

h2 {
    font-size: 47px;
    font-weight: 600;
}

h3 {
    font-size: 32px;
    font-weight: 600;

}

h4 {
    font-size: 22px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 14px;
}

ul {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none
}

.mt-10 {
    margin-top: 10px;
}

p {
    font-size: 14px;
    line-height: 24px;
    color: #333;
    margin-bottom: 15px;
    font-weight: 300;
}
hr {
    border-bottom: 1px solid #eceff8;
    border-top: 0 none;
    margin: 30px 0;
    padding: 0;
}

label {
    color: #7e7e7e;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
}

*::-moz-selection {
    background: #d6b161;
    color: #fff;
    text-shadow: none;
}

::-moz-selection {
    background: #444;
    color: #fff;
    text-shadow: none;
}

::selection {
    background: #444;
    color: #fff;
    text-shadow: none;
}

*::-moz-placeholder {
    color: #ffffff;
    font-size: 20px;
    opacity: 1;
}

*::placeholder {
	color: #333;
	font-size: 14px;
	opacity: 1;
}

.theme-overlay {
    position: relative
}

.theme-overlay::before {
    background-color: rgb(115, 108, 236);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.6;
    position: absolute;
    top: 0;
    width: 100%;
}

.separator {
    border-top: 1px solid #f2f2f2
}
a{
    text-decoration: none;
}
/* button style */
.btn {
    -moz-user-select: none;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 18px;
    margin-bottom: 0;
    text-align: center;
    transition: all 0.3s ease 0s;
    vertical-align: middle;
    white-space: nowrap;
    padding: 15px 30px;
    z-index: 244;
    border-radius: 5px;
    background-color:var(--main);
    box-shadow: 0px 0px 15.66px 2.34px  var(--main);;
}


.btn:hover {
    background-color: #ffffff;
    color: #333;
}

/* scrollUp */
#scrollUp {
    background: var(--main);
    height: 35px;
    width: 35px;
    right: 50px;
    bottom: 77px;
    color: rgb(255, 255, 255);
    text-align: center;
    line-height: 34px;
    border-radius: 5px;
    font-size: 14px;
}

#scrollUp:hover {
    background: #fff;
    color:var(--main);
}


/*====================================================
                Header Nav bar
======================================================*/
.menu-area nav ul li {
    display: inline-block;
    font-size: 14px;
    margin-right: 30px;
    letter-spacing: 1px;
    z-index: -9;
}
.menu-area nav ul {
    position: relative;
    z-index: 9999;
}
.menu-area nav ul li ul {
    position: absolute;
    width: 36%;
    background-color:var(--main);
    top: 180%;
    box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.29);

}
.menu-area nav ul li a {
   
    color: #333;
    font-weight: 600;
}
.menu-area nav ul li a:hover {
    color:var(--main);
}
.menu-area nav ul li ul li a {
    display: block;
    color: #fff;
    padding: 0px;
}
.menu-area nav ul li ul li {
    padding: 13px;
    border-bottom: 1px solid #fff;
    display: block;
    margin: 0px;
}
.menu-area nav ul li ul li:last-child {
    border:none;
}
.menu-area nav ul li ul{
    transform: scaleY(0);
    transform-origin: top;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;

}
.menu-area nav ul li:hover ul{
    transform: scaleY(1);
}
.main-menu-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
}
.header-main-area {
    z-index: -9;
    background-color: #fff;
    box-shadow: 1px 1px 12px 0px #0000001c;
    border-top: 5px solid var(--main);
    padding: 25px 0px;
}
.sticky {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 9999;
    animation: fadeInDown 1s both 0.2s;
}
.menu-area nav ul li >ul {
    margin-top: 18px;
    box-shadow: none;
}
.menu-area nav ul li ul li >a:hover{
    color: #fff;
}
i.icofont-thin-down {
    font-size: 15px;
    font-weight: 900;
}
.logo {
    position: relative;
}
.logo a::before {
    content: "";
    display: block;
    clip-path: polygon(100% 50%, 0 0, 0 100%);
    background: var(--main);
    position: absolute;
    height: 100%;
    width: 9%;
    right: 59%;
}
.mean-container .mean-nav {
	background: var(--main) none repeat scroll 0 0;
}
.mean-container a.meanmenu-reveal {
	border: 1px solid var(--main);
	color: var(--main);
}
.mean-container a.meanmenu-reveal span {
	background: var(--main) none repeat scroll 0 0;
}
/*====================================================
                    Start Hero
======================================================*/
span.subtitle {
    font-size: 26px;
}
h1.ah-headline.letters.type {
    text-transform: uppercase;
    font-size: 62px;
}
span.ah-words-wrapper {
    color:var(--main);
}
.hero-area {
    min-height: 700px;
}

a.btn-tow {
    background-color: transparent;
    border: 1px solid  var(--main);
    color: #333;
    box-shadow: none;
}
.btn-area-hero .btn{
    box-shadow: none;
}
.btn-area-hero .btn:hover{
    border: 1px solid  var(--main);
}
a.btn-tow:hover{
    background-color:var(--main);
    color: #fff;
}
.btn-area-hero a {
    margin-right: 15px;
}
.btn-area-hero {
    padding-top: 40px;
}
.hero-img-area {
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
}
/*====================================================
                    Start About
======================================================*/
.about-area {
    min-height: 600px;
}
.about-heading-area h1{
    text-transform: uppercase;
}
.about-heading-area {
    position: relative;
}
.about-heading-area h1::before {
    content: "";
    width: 3px;
    height: 112px;
    background: var(--main);
    display: block;
    position: absolute;
    border-radius: 10px;
}
.about-heading-area h1::after {
    content: "";
    width: 3px;
    height: 112px;
    background: var(--main);
    display: block;
    position: absolute;
    right: 0;
    top: 0%;
    border-radius: 10px;
}
.about-text-area p {
    color: #333;
    font-size: 16px;
    line-height: 33px;
    font-weight: 400;
}
.about-highlight {
    color:var(--main);
    font-size: 99px;
    font-weight: 800;
    text-transform: uppercase;
}
.about-img-area{
    -webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.btn-area-about {
    margin-top: 34px;
}
/*====================================================
                    Start Services
======================================================*/
.single-services-area.text-center i {
    font-size: 50px;
}
.single-services-area.text-center h4 {
    text-transform: uppercase;
    font-weight: 500;
    padding: 17px 0px 4px 0px;
}
.single-services-area {
    padding: 40px 25px;
    border-radius: 5px;
    border: 1px solid  var(--main);
    position: relative;
    margin-bottom: 25px;
}
.single-services-area span {
    line-height: 26px;
    color: #333;
}
.single-services-area::before {
    content: "";
    display: block;
    position: absolute;
    width: 43px;
    height: 33px;
    background-color:var(--main);
    left: 0;
    top: 0;
    border-radius: 0px 0px 49px 0px;
    z-index: -9;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
.single-services-area:hover::before{
    width: 100%;
    height: 100%;
    border-radius: 0px 0px 0px 0px;
}
.single-services-area:hover,.single-services-area:hover h4{
    color: #fff;
}
.single-services-area:hover span{
    color: #dadada;
}
/*====================================================
                    Start Banner
======================================================*/
.banner-area {
    background-color:var(--main);
    min-height: 300px;
    display: flex;
    align-items: center;
}
.banner-text-area h1 {
    color: #fff;
}
.banner-text-area p {
    color: #fff;
}
.banner-button-area a {
    background-color: #fff;
    padding: 30px 60px;
    font-size: 22px;
}
.banner-button-area a:hover {
    border: 1px solid #fff;
}
.flex-area {
    align-items: center;
}
.banner-button-area {
    float: right;
}

/*====================================================
                    Start Banner
======================================================*/
.portfolio-filter ul {
	padding: 0;
	list-style: none;
	margin-bottom: 30px;
}
.portfolio-filter ul li {
    font-weight: 600;
    text-transform: capitalize;
    display: inline-block;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    padding: 7px 20px;
    letter-spacing: 1px;
    background: rgb(250, 250, 250);
    margin: 0px 5px 20px;
    transition: all 0.5s ease-in-out 0s;
}
.portfolio-filter ul li:hover{
	border-color:var(--main);
	background: var(--main);
	color: #fff;
}
.portfolio-filter .active {
    color: #fff;
	border-color:var(--main);
    background: var(--main);
}
.work_content_area .item-img {
	position: relative;
	
	-webkit-transition: all .4s;
	transition: all .4s;
}
.work_content_area .item-img:hover {
	-webkit-box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.1);
	box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.1);
}
.work_content_area .item-img:hover .item-img-overlay {
	visibility: visible;
	opacity: 1;
}
.work_content_area .item-img-overlay {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	padding: 30px;
	background: rgba(0, 0, 0, 0.6);
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all .5s;
	transition: all .5s;
}
.work_content_area .item-img-overlay .icon {
	position: absolute;
	right: 30px;
	bottom: 30px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 50%;
	border: 1px solid  var(--main);
	text-align: center;
	font-size: 20px;
	color:var(--main);
}
.work_content_area .item-img-overlay p {
	color:var(--main);
	font-weight: 400;
	font-size: 13px;
}
.work_content_area .item-img-overlay h5{
	font-weight: 400;
	color: #fff;
	font-size: 16px;
	margin-top: 5px;
}
/*====================================================
                    Counter
======================================================*/
section#counter_area {
    min-height: 250px;
    display: flex;
    align-items: center;
    background-color: var(--main);
}
.single_counter, h3, h5 {
    color: #fff;
}
  
/*====================================================
                    Resume
======================================================*/
.education-container {
    position: relative;
    display: block;
    margin: 0;
}
.edu-list {
    position: relative;
    display: block;
    margin: 0 50px;
    list-style: none;
}
.edu-list > li {
	border: 1px solid #e3e3e3;
	border-radius: 20px;
	box-shadow: 0px 1px 40px rgba(255,255,255, 0.15);
    position: relative;
    margin: 0 0 30px;
    padding: 25px 25px 25px 25px;
}
.edu-list > li strong{
    color:var(--main);
    font-size: 14px;
}
.edu-list > li h5{
	color: #222;
    font-size: 16px;
    font-weight: 600;
}
.dark_bg .edu-list > li h5{
	color: #fff;
}
.dark_bg .edu-list > li p{
	color: #fff;
}
.edu-list > li:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 40px;
    left: -27px;
    width: 3px;
    height: 100%;
    background: var(--main);
}
.edu-list > li::after {
	content: "#";
    position: absolute;
    top: 0;
	left: -50px;
	width: 50px;
	height: 50px;
    line-height: 50px;
	border-radius: 100%;
	text-align: center;
    font-size: 20px;
    font-family: 'et-line';
    background: var(--main);
    color: #fff;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.07);
    cursor: pointer;
    -webkit-transition: all .3s ease;
       -moz-transition: all .3s ease;
            transition: all .3s ease;
}
.experience > li::after {
	content: "#";
    position: absolute;
    top: 0;
	left: -50px;
	width: 50px;
	height: 50px;
    line-height: 50px;
	border-radius: 100%;
	text-align: center;
    font-size: 20px;
    font-family: 'et-line';
    background: var(--main);
    color: #fff;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.07);
    cursor: pointer;
    -webkit-transition: all .3s ease;
       -moz-transition: all .3s ease;
            transition: all .3s ease;
}
.edu-list > li {
    border: 1px solid rgb(227, 227, 227);
    border-radius: 5px;
    box-shadow: rgba(255, 255, 255, 0.15) 0px 1px 40px;
    position: relative;
    margin: 0px 0px 30px;
    padding: 25px;
}
/*====================================================
                    Blog
======================================================*/

.single_blog{
	margin-bottom: 30px;
}
.single_blog:hover img{
	-moz-transform: scale(1.03);
    -webkit-transform: scale(1.03);
    transform: scale(1.09);
}
.single_blog .blog-image{
	overflow: hidden;
}
.single_blog img{
	width: 100%;
    border-radius: 3px 3px 0 0;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.5s;
}
.blog-thumb{
	background: transparent;
	border-radius: 3px;
	text-align: left;
	margin-bottom: 30px;
}
.blog-thumb small {
	color:var(--main);
	font-weight: 500;
	display: block;
}
.blog-thumb small .fa {
	margin-right: 5px;
}
.blog-thumb small,
.blog-thumb small + span {
	display: inline-block;
	vertical-align: middle;
}
.blog-thumb small + span{
	color: #777;
	font-size: 10px;
	font-weight: bold;
	text-transform: capitalize;
	margin-left: 2px;
}
.dark_bg .blog-thumb small + span{
	color: #fff;
}
.blog-thumb h4 {
	color: #222;
    padding: 0px 0 12px;
    font-size: 24px;
    margin: 0;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}
.dark_bg .blog-thumb h4{
	color: #fff;
}
.dark_bg .blog-thumb p{
	color: #fff;
}
.blog-thumb h4:hover{
	color:var(--main);
}
#blog-detail h2 {
	padding: 25px 0 10px 0;
}
.blog-info {
	padding: 25px 35px;
}
.blog-info .blog_btn{
	padding: 20px 30px;
}
.blog-info .btn {
    padding: 5px 10px;
    box-shadow: none;
    font-size: 14px;
}
.slick-dots li.slick-active button:before {
    opacity: .75;
    color:var(--main);
    font-size: 10px;
}

/*====================================================
                    Contact
======================================================*/

.info-contact{
    margin-top: 6px;
}
#contact-form input {
	background-color: transparent;
	border: 1px solid  var(--main);
	border-radius: 28px;
	margin: 14px 4px 20px 10px;
	font-size: 14px;
	color: #333;
	width: 47%;
	padding: 20px;
}
#contact-form textarea {
	margin: 10px 0px 30px 15px;
	padding: 20px 0px 0px 14px;
	width: 96%;
	background-color: transparent;
	border: none;
	border-radius: 15px;
	font-size: 14px;
	border: 1px solid  var(--main);
}
.submit.btn2 {
	border: navajowhite;
	margin: 14px;
}
.submit.btn2 i {
	margin-left: 4px;
}
.submit.btn2:hover i {
    transform: translateX(10px);
    transform-origin: right;
}
.submit.btn2 {
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
/*====================================================
                    Footer
======================================================*/

.footer-area {
    background-color:var(--main);
    padding: 80px 0px;
    color: #fff;
}
.footer-01 p {
    color: #fff;
    padding-top: 30px;
}
.footer-02 h4 {
    color: #fff;
    padding-bottom: 24px;
}
.footer-02 ul li a {
    color: #fff;
    line-height: 41px;
    font-size: 14px;
    letter-spacing: 2px;
}
.social-media-area ul li {
    display: inline-block;
}
.social-media-area ul li a {
    color: #333;
}
.copyright-area {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 44px 0px;
}
/*====================================================
                    Proloader
======================================================*/
#loading{
	background-color:var(--main);
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 111111;
	margin-top: 0px;
	top: 0px;
}
#loading-center{
	width: 100%;
	height: 100%;
	position: relative;
	}
#loading-center-absolute {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 150px;
	width: 150px;
	margin-top: -75px;
	margin-left: -75px;	
	-ms-transform: rotate(45deg); 
   	-webkit-transform: rotate(45deg);
    transform: rotate(45deg); 

}
.object{
	width: 20px;
	height: 20px;
	background-color:#FFF;
	position: absolute;
	left: 65px;
	top: 65px;
	}
.object:nth-child(2n+0) {
	margin-right: 0px;

}


#object_one {
	-webkit-animation: object_one 2s infinite;
	animation: object_one 2s infinite;
	-webkit-animation-delay: 0.2s; 
    animation-delay: 0.2s; 
	}
#object_two {
	-webkit-animation: object_two 2s infinite;
	animation: object_two 2s infinite;
	-webkit-animation-delay: 0.3s; 
    animation-delay: 0.3s; 
	}
#object_three {
	-webkit-animation: object_three 2s infinite;
	animation: object_three 2s infinite;
	-webkit-animation-delay: 0.4s; 
    animation-delay: 0.4s; 
	}
#object_four {
	-webkit-animation: object_four 2s infinite;
	animation: object_four 2s infinite;
	-webkit-animation-delay: 0.5s; 
    animation-delay: 0.5s; 
}
#object_five {
	-webkit-animation: object_five 2s infinite;
	animation: object_five 2s infinite;
	-webkit-animation-delay: 0.6s; 
    animation-delay: 0.6s; 
}
#object_six {
	-webkit-animation: object_six 2s infinite;
	animation: object_six 2s infinite;
	-webkit-animation-delay: 0.7s; 
    animation-delay: 0.7s; 
}
#object_seven {
	-webkit-animation: object_seven 2s infinite;
	animation: object_seven 2s infinite;
	-webkit-animation-delay: 0.8s; 
    animation-delay: 0.8s; 
}
#object_eight {
	-webkit-animation: object_eight 2s infinite;
	animation: object_eight 2s infinite;
	 -webkit-animation-delay: 0.9s; 
    animation-delay: 0.9s; 
}

#object_big{
	
	position: absolute;
	width: 50px;
	height: 50px;
	left: 50px;
	top: 50px;
	-webkit-animation: object_big 2s infinite;
	animation: object_big 2s infinite;
		 -webkit-animation-delay: 0.5s; 
    animation-delay: 0.5s; 
}	




@-webkit-keyframes object_big {
 50% { -webkit-transform: scale(0.5); }

}

@keyframes object_big {
 50% { 
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
  } 

}




@-webkit-keyframes object_one {
 50% { -webkit-transform: translate(-65px,-65px)  ; }

}

@keyframes object_one {
 50% { 
    transform: translate(-65px,-65px) ;
    -webkit-transform: translate(-65px,-65px) ;
  } 

}



@-webkit-keyframes object_two {
  50% { -webkit-transform: translate(0,-65px) ; }
}

@keyframes object_two {
 50% { 
    transform: translate(0,-65px) ; 
    -webkit-transform: translate(0,-65px) ; 
  } 

}



@-webkit-keyframes object_three {
 50% { -webkit-transform: translate(65px,-65px) ; }
}

@keyframes object_three {
 50% { 
    transform: translate(65px,-65px) ;
    -webkit-transform: translate(65px,-65px) ;
  } 
}



@-webkit-keyframes object_four {
  
  50% { -webkit-transform: translate(65px,0) ; }

}

@keyframes object_four {
  50% { 
    transform: translate(65px,0) ;
    -webkit-transform: translate(65px,0) ;
  } 

}




@-webkit-keyframes object_five {
  
  50% { -webkit-transform: translate(65px,65px) ; }

}

@keyframes object_five {
  50% { 
    transform: translate(65px,65px) ;
    -webkit-transform: translate(65px,65px) ;
  } 

}



@-webkit-keyframes object_six {
  
  50% { -webkit-transform: translate(0,65px) ; }

}

@keyframes object_six {
  50% { 
    transform:  translate(0,65px) ;
    -webkit-transform:  translate(0,65px) ;
  } 

}




@-webkit-keyframes object_seven {
  
  50% { -webkit-transform: translate(-65px,65px) ; }

}

@keyframes object_seven {
  50% { 
    transform: translate(-65px,65px) ;
    -webkit-transform: translate(-65px,65px) ;
  } 

}


@-webkit-keyframes object_eight {
  
  50% { -webkit-transform: translate(-65px,0) ; }

}

@keyframes object_eight {
  50% { 
    transform: translate(-65px,0) ;
    -webkit-transform: translate(-65px,0) ;
  } 

}