/**
	
* Template Name: Likas - Personal Portfolio Html Template
* Version: 1.0
* Author: themehut
* Email: sklahmd786@gmail.com
* Developed By: themehut
* First Release: 06 April 2020

**/

/*===================================================
Table of CSS Content arrage with every section name
=====================================================
01.	Default Css
02.	Default Margin Css
03.	Default Padding Css
04.	Nav Menu Css
05.	Main Image Css
06.	profile css
07.	Services Css
08.	portfolio Css
09.	Testimonial Css
10.	Follow Us Css
11.	Footer Css
12.	Page Loader Css
13.	Tab Content Css
/*==================================================================
 	Typography links 
 	Import Google Fonts
 ==================================================================*/
@import url("https://fonts.googleapis.com/css?family=Fira+Sans:500,500i,600,600i,700,700i");
@import url("https://fonts.googleapis.com/css?family=Poppins:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i")
/*==================================================================
 	Animation Links
 ==================================================================*/
@import url('jquery.fancybox.css');
@import url('owl.carousel.min.css');
/*====================================================================
01.	Default Css
======================================================================*/
body{
	font-family: 'Poppins', sans-serif;
	font-size:15px;
	line-height:28px;
	font-weight:500;
	vertical-align: middle;
	overflow-x: hidden;
	position:relative;
}
.main_menu, .home_1, #form_area, 
.achievement, #profile, #services_one, 
#clients, #contact{
	overflow-x: hidden;
}
.preloader{
	position: absolute;
	left: 50%;
	top: 50%;
	background-color: #080808;
}
p{
	font-weight: 400
}
h1,h2,h3,h4,h5,h6 {
	font-family: 'Fira Sans', sans-serif;
	font-weight: 700
}
h1{
	font-size: 110px;
	line-height: 110px;
}
h2{
	font-size: 70px;
	line-height: 70px;
}
h3{
	font-size: 48px;
	line-height: 48px;
}
h4{
	font-size: 35px;
	line-height: 30px;
}
h5{
	font-size: 21px;
	line-height: 26px;
}
h6{
	font-size: 18px;
	line-height: 20px;
}
a:hover,a:focus,a.active{
	text-decoration: none !important;
}
button:focus {
  outline: none !important;
}

img{
	width:100%;
	height:auto;
}
ul{
	margin: 0;
	padding: 0;
}
li{
	list-style-type: none;
}
.btn{
	padding: 0px 25px;
    line-height: 48px;
    border: 2px solid transparent;
    border-radius: 0px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 16px;
    font-weight: 700
}
.btn.focus, .btn:focus{
	outline: 0;
    box-shadow: 0 0 0 0rem transparent;
}
.mx_auto{
	display: table;
	margin: 0 auto
}
.z-index-1{
	z-index: 1
}
/*====================================================================
02.	Title Css
======================================================================*/
.section_title_middle{
	text-align: center;
	width: 70%;
	display: table;
	margin: 0 auto 60px
}
[class*="section_title_"] .section_title{
	position: relative;
	font-weight: 700;
	z-index: 1
}
[class*="section_title_"] .section_title:after{
	position: absolute;
	content: "";
	left: auto;
	bottom: 11px;
	width: 70px;
	height: 3px;
	margin-left: 5px
}
[class*="section_title_"] span{
	position: absolute;
    top: 0;
	left: 52%;
    font-size: 80px;
    font-weight: 700;
	-webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 2px
}
.social_media li a{
	float: left;
	width: 40px;
	line-height: 40px;
	border-radius: 50%;
	text-align: center;
	margin-right: 10px;
	margin-bottom: 5px
}
/*====================================================================
04.	Nav Menu Css
======================================================================*/
.nav-on-top{
  animation-fill-mode: both;
  width: 100%;
  z-index: 999;
  top: 0;
  position: fixed;
}
.nav-on-banner{
  animation-fill-mode: both;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
/* Main Menu sticky
---------------------------*/
@keyframes menu_sticky {
    0% {
        margin-top: -100px;
    }

    50% {
        margin-top: -90px;
    }

    100% {
        margin-top: 0;
    }
}

header.nav-scroll{
    animation-duration: 1s;
    animation-name: menu_sticky;
    animation-timing-function: ease-out;
}
.nav-scroll{
    left: 0;
    position: fixed;
    top: -100px;
    width: 100%;
    z-index: 100;
}
.navbar-light .navbar-nav .nav-link{
	letter-spacing:1px;
	font-weight:500;
	font-weight:500;
}
.navbar{
	border:none;
}
.navbar-expand-lg .navbar-nav .nav-link{
	padding:30px 15px;
	font-weight: 600
}
.navbar-expand-lg .navbar-nav li:last-child .nav-link{
	padding-right: 0
}
.navbar.small {
	opacity: 1.5;
}
.nav-pills .nav-link{
	border-radius: 0px;
}
.navbar-brand img{
	width: 148px
}
/*====================================================================
05.	Main Section Css
======================================================================*/
#particles-js canvas{
  position: absolute;
  top: 0;
  left: 0
}
.banner{
	background: url(../images/slider/1.png) no-repeat center center / cover;
	position: relative;
	height: 100vh
}
.name_title{
	font-size: 150px;
	font-weight: 700;
	position: absolute;
	top: -12px;
    left: -12px;
	-webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 2px;
    opacity: .3
}
.sl-headline.clip{
	position: relative;
	z-index: 1
}

/*====================================================================
05.	Hiring Form Section Css
======================================================================*/
.modal-header .close{
	margin: 0;
	padding: 0
}
.modal-content, .modal-header{
	border: none;
	border-radius: 0
}
.modal-body{
	padding: 40px 30px
}
.modal-header{
	display: block
}
/*====================================================================
05.	Achievement Section Css
======================================================================*/
.achievement {

}
.counting_digit .number{
	font-size: 40px;
	font-weight: 700
}
.counting_digit .tag{
	font-size: 21px
}
/*====================================================================
05.	profile Section Css
======================================================================*/
.about_info{
	border-right: 10px solid transparent;
	border-bottom: 10px solid transparent
}
.about_info ul .fa{
	position: relative;
	width: 42px;
	height: 42px;
	border: 2px solid #fff;
	line-height: 38px;
	text-align: center;
	border-radius: 50%;
	margin-right: 20px
}
.about_info ul li{
    margin-bottom: 20px
}
.about_info ul span {
    width: 210px;
    display: inline-block
}
.about_info ul i{
    font-style: normal;
}
#profile img{
	position: relative
}
#profile .social_media{
	position: absolute;
    left: 40px;
    top: 50px
}
/*====================================================================
05.	Service Section Css
======================================================================*/
.service_item {
	padding: 40px 30px;
	text-align: center;
	border: 1px dashed transparent
}
.service_item .inner_title{
	margin: 30px 0 20px 0
}
.service_item i{
	width: 80px;
	height: 80px;
	display: block;
	border-radius: 50%
}
.service_item p{
	margin-bottom: 0px
}
/*==============================
	19. Portfolio Section css
==============================*/
.xy-center{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%
}
/* 11. Homepage One Portfolio Section
=======================================*/
figure {
    margin: 0;
}
.controls .control{
	padding: 7px 30px;
    cursor: pointer;
    font-weight: 500;
    display: table;
    float: left;
    margin: 0 5px 0 0;
    border-radius: 50px;
    letter-spacing: 1px;
    border: 2px solid;
    font-family: 'Montserrat', sans-serif;
}
.project{
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
	width: 100%
}
.project a{
	width: 100%
}
.project figure:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.7;
    width: 100%;
    height: 100%;
}
.project figcaption{
    bottom: 0;
    left: 0;
    margin: 40px 50px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
.project-title{
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    letter-spacing: 1px;
    text-transform: capitalize;
    line-height: 28px;
}
.project-category{
    position: absolute;
    left: 0;
    bottom: 0;
    letter-spacing: 7px;
    transform: rotate(-90deg);
    transform-origin: 0 0 0;
}
.project-zoom{
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    margin: -72px;
    opacity: 0;
    overflow: hidden;
}
.project-zoom:after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: FontAwesome;
    font-size: 40px;
}
.project figure:hover .project-title{
    opacity: 0;
    top: 30px;
}
.project figure:hover .project-category{
    letter-spacing: 32px;
    opacity: 0;
}
.project figure:hover .project-zoom{
    opacity: 1;
}
.project figure:hover:after{
    opacity: 0;
}
\/* 2 Columns */

.mix,
.gap {
    width: calc(100%/2 - (((0 - 0) * 1rem) / 2));
}

/* 2 Columns */

@media screen and (min-width: 541px) {
    .mix,
    .gap {
        width: calc(100%/2 - (((0 - 0) * 1rem) / 3));
    }
}

/* 4 Columns */

@media screen and (min-width: 961px) {
    .mix,
    .gap {
        width: calc(100%/4 - (((0 - 0) * 1rem) / 4));
    }
}

/* 4 Columns */

@media screen and (min-width: 1281px) {
    .mix,
    .gap {
        width: calc(100%/4 - (((0 - 0) * 1rem) / 5));
    }
}
/*==============================
	19. Portfolio Section css
==============================*/
.client_item p{
	position: relative;
	padding: 30px;
	color: #fff
}
.client_item p:before{
	position: absolute;
    content: "";
    left: 30px;
    bottom: -30px;
    width: 5px;
    height: 30px
}
.feedback.owl-carousel .owl-item img{
	width: 70px;
	border: 5px solid transparent;
	border-radius: 50%
}
/*==============================
	19. Blog Section css
==============================*/
.blog-tags li{
	float: left;
	margin-right: 15px;
	font-size: 13px
}
/*==============================
	19. Contact Section css
==============================*/
#contact{
	background: rgba(0, 0, 0, 1) url(../images/bg.png) no-repeat center center / cover;
}
.contact_address{
	border: 2px dashed #fff
}
.contact_address span{
	display: table;
	margin-bottom: 15px
}
.contact_address span i{
	font-size: 20px;
	margin-right: 10px
}
.form-control, .form-control:focus{
	border-radius: 0;
	border: none;
	background: transparent;
	border-bottom: 2px solid transparent;
	box-shadow: none;
	font-size: 14px
}
.contact_message textarea{
	height: 200px
}
.error-handel {
  bottom: -30px;
  display: table;
  height: 35px;
  left: 15px;
  margin: auto 0;
  position: absolute;
  text-align: left
}
#success, #error {
  display: none;
  line-height: 34px
}
#success {
	color: #0255ff
}
#error{
	color: #f00
}
/*==============================
	Scroll
==============================*/
#scroll span{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -12px;
    height: 0;
    width: 0;
    border: 8px solid transparent;
	border-bottom-color: #fff
}

#scroll{
    position: fixed;
    right: 15px;
    bottom: 15px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    text-indent: -9999px;
    display: none;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;
    z-index: 9999;
}