// Table of contents //

01. google fonts line-42
02. body line 48
03. Page Loading line 64
04. custom elements
05. links
06. Text Heading 
07. Text Color
08. Margin Top
09. Margin Bottom
10. Padding Left
11. Padding Top
12. Padding Bottom
13. Padding top & bottom
14. No Padding
15. Button
16. Background Color
17. Font Weight
18. frame Style
19. Menu navbar
20. Home
21. Swiper Slider
22. Home Social Icon
23. About
24. The Timeline
25. Timeline Color Style
26. Service
27. Skils
28. Portfolio
29. Typography
30. Contact From
31. Footer






/* 1.google fonts */
@import url('https://fonts.googleapis.com/css2?family=Saira+Semi+Condensed:wght@100;200;300;400;500;600;700;800&display=swap');
/* 2.body */
* {
	outline: none !important;
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Saira Semi Condensed', sans-serif !important;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	font-size: 17px !important;
	color: #0e0e0e;
	overflow-x:hidden;
}
/* Black body theme*/
.black-theme {
	background: #000;
	color: #fff;
}

/* 3. Page Loading */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../img/loader1.gif) center no-repeat #fff;
}
#skils{
background: url(../img/service-bg.jpg);
background-size: cover;
}
#skils1{
	background: url(../img/sliderimage/about-img-1.jpg);
	background-size: cover;
}
.pink-theme a{
	color:#8c2755;
}
.blue-theme a{
	color:#007bff;
}
.dark-theme a{
	color:#343a40;
}
.yellow-theme a{
	color:#ffc107;
}
.orange-theme a{
	color:#fd7e14;
}
.green-theme a{
	color:#28a745;}
	
	
.green-theme a:hover,
.yellow-theme a:hover{
	text-decoration:none !important;
	color:#fff  !important;
}	

a:hover{
	text-decoration:none !important;
	color:#000  !important;
}

/* 4. custom elements */
img {
	max-width: 100%;
}



/* Content middle */
.content-middle{display: table-cell;vertical-align: middle;height:100vh;}

.display-blog {
	display: block;
}

/* Overflow */
.overflow-hidden{overflow:hidden:}

.overflow-hidden {
	overflow: hidden !important;
}

/* 5.links */
a {
	color: #0e0e0e;
	-webkit-transition: 0.25s ease-in-out;
	-moz-transition: 0.25s ease-in-out;
	-ms-transition: 0.25s ease-in-out;
	-o-transition: 0.25s ease-in-out;
	transition: 0.25s ease-in-out;
}

a:hover {
	color: #0e0e0e;
}

a:active {
	color: #0e0e0e;
}

/* 6.Text Heading  */
h1, h2, h3, h4, h5 { margin:0; padding:0; }
h1 { font-weight:700;font-size:50px !important;}
h2 { font-size:36px !important; font-weight:400; letter-spacing:inherit;}
h3 { font-size:28px !important; letter-spacing:inherit; font-weight:700; }
h4 { letter-spacing: 0px; font-weight:400; text-transform:none; font-size:24px !important;}
h5 { letter-spacing: 2px; font-weight:600; font-size:20px !important;}
h6 { letter-spacing: 1px; font-size: 16px !important;}


/* 7.Text Color */
.text-blue{color: #007bff;}
.text-indigo{color: #6610f2;}
.text-purple{color: #6f42c1;}
.text-pink{color: #8c2755;}
.text-red{color: #ff0018;}
.text-orange{color: #fd7e14;}
.text-yellow{color: #ffc107;}
.text-green{color: #28a745;}
.text-teal{color: #20c997;}
.text-cyan{color: #17a2b8;}
.text-white{color: #fff;}
.text-gray{color: #6c757d;}
.text-gray-dark{color: #343a40;}
.text-primary{color: #007bff;}
.text-secondary{color: #6c757d;}
.text-success{color: #28a745;}
.text-info{color: #17a2b8;}
.text-warning{color: #ffc107;}
.text-danger{color: #dc3545;}
.text-light{color: #f8f9fa;}
.text-dark-blue{color: #151735;}
.text-black{color: #000;}


/* 8.Margin Top */
.margin-top-one {margin-top: 1%;}
.margin-top-two {margin-top: 2%;}
.margin-top-three {margin-top: 3%;}
.margin-top-four {margin-top: 4%;}
.margin-top-five {margin-top: 5%;}
.margin-top-six {margin-top: 6%;}
.margin-top-seven {margin-top: 7%;}
.margin-top-eight {margin-top:8%;}
.margin-top-nine {margin-top: 9%;}
.margin-top-ten {margin-top: 10%;}

/* 9.Margin Bottom */
.margin-bottom-one {margin-bottom: 1%;}
.margin-bottom-two {margin-bottom: 2%;}
.margin-bottom-three {margin-bottom: 3%;}
.margin-bottom-four {margin-bottom: 4%;}
.margin-bottom-five {margin-bottom: 5%;}
.margin-bottom-six {margin-bottom: 6%;}
.margin-bottom-seven {margin-bottom: 7%;}
.margin-bottom-eight {margin-bottom:8%;}
.margin-bottom-nine {margin-bottom: 9%;}
.margin-bottom-ten {margin-bottom: 10%;}


/* 10.Padding Left*/
.padding-left-one{padding-left:1%}
.padding-left-two{padding-left:2%}
.padding-left-three{padding-left:3%}
.padding-left-four{padding-left:4%}
.padding-left-five{padding-left:5%}
.padding-left-six{padding-left:6%}
.padding-left-seven{padding-left:7%}
.padding-left-eight{padding-left:8%}
.padding-left-nine{padding-left:9%}
.padding-left-ten{padding-left:10%}

/* 11.Padding Top*/
.padding-top-one{padding-top:1%}
.padding-top-two{padding-top:2%}
.padding-top-three{padding-top:3%}
.padding-top-four{padding-top:4%}
.padding-top-five{padding-top:5%}
.padding-top-six{padding-top:6%}
.padding-top-seven{padding-top:7%}
.padding-top-eight{padding-top:8%}
.padding-top-nine{padding-top:9%}
.padding-top-ten{padding-top:10%}

/* 12.Padding Bottom*/
.padding-bottom-one{padding-bottom:1%}
.padding-bottom-two{padding-bottom:2%}
.padding-bottom-three{padding-bottom:3%}
.padding-bottom-four{padding-bottom:4%}
.padding-bottom-five{padding-bottom:5%}
.padding-bottom-six{padding-bottom:6%}
.padding-bottom-seven{padding-bottom:7%}
.padding-bottom-eight{padding-bottom:8%}
.padding-bottom-nine{padding-bottom:9%}
.padding-bottom-ten{padding-bottom:10%}

/* 13.Padding Top & Bottom*/
.padding-tb-one{padding-bottom:1%;padding-top:1%}
.padding-tb-two{padding-bottom:2%;padding-top:2%}
.padding-tb-three{padding-bottom:3%;padding-top:3%}
.padding-tb-four{padding-bottom:4%;padding-top:4%}
.padding-tb-five{padding-bottom:5%;padding-top:5%}
.padding-tb-six{padding-bottom:6%;padding-top:6%}
.padding-tb-seven{padding-bottom:7%;padding-top:7%}
.padding-tb-eight{padding-bottom:8%;padding-top:8%}
.padding-tb-nine{padding-bottom:9%;padding-top:9%}
.padding-tb-ten{padding-bottom:10%;padding-top:10%}

/* 14.No Padding */
.no-padding{
	padding-left:0px;
	padding-right:0px;
}

/* 15.Button */
.btn {
	padding: 8px 29px;
	display: inline-block;
}
.btn:hover {
	background:#000 !important;
	color:#fff !important;
}


/* 16.Background Color Css*/
.bg-violet{background:#771969 !important;}
.bg-blue{background: #007bff !important;}
.bg-indigo{background: #6610f2 !important;}
.bg-purple{background: #6f42c1 !important;}
.bg-pink{background: #8c2755 !important;}
.bg-red{background: #fc0100 !important;}
.bg-orange{background: #fd7e14 !important;border-color: #fd7e14 !important;}
.bg-yellow{background: #ffc107 !important;}
.bg-green{background: #28a745 !important;}
.bg-teal{background: #20c997 !important;}
.bg-cyan{background: #17a2b8 !important;}
.bg-white{background: #fff !important;}
.bg-gray{background: #6c757d !important;}
.bg-gray-dark{background: #343a40 !important;}
.bg-primary{background: #007bff !important;}
.bg-secondary{background: #6c757d !important;}
.bg-success{background: #28a745 !important;}
.bg-info{background: #17a2b8 !important;}
.bg-warning{background: #ffc107 !important;}
.bg-danger{background: #dc3545 !important;}
.bg-light{background: #f8f9fa !important;}
.bg-dark{background: #343a40 !important;}
.bg-black{background: #000 !important;}

/* 17.Font Weight */
.font-100{font-weight:100}
.font-200{font-weight:200}
.font-300{font-weight:300}
.font-400{font-weight:400}
.font-500{font-weight:500}
.font-600{font-weight:600}
.font-700{font-weight:700}
.font-bold{font-weight:bold}

/* 18.Frame Style*/
.pink-frame {
	border-top: 0px solid #8c2755;
	border-bottom: 5px solid #8c2755;
	border-left: 5px solid #8c2755;
	border-right: 0px solid #e6e6e6;
}
.blue-frame {
	border-top: 0px solid #007bff;
	border-bottom: 5px solid #007bff;
	border-left: 5px solid #007bff;
	border-right: 0px solid #007bff;
}
.dark-frame {
	border-top: 0px solid #343a40;
	border-bottom: 5px solid #343a40;
	border-left: 5px solid #343a40;
	border-right: 0px solid #343a40;
}
.yellow-frame {
	border-top: 0px solid #ffc107;
	border-bottom: 5px solid #ffc107;
	border-left: 5px solid #ffc107;
	border-right: 0px solid #ffc107;
}
.orange-frame {
	border-top: 0px solid #fd7e14;
	border-bottom: 5px solid #fd7e14;
	border-left: 5px solid #fd7e14;
	border-right: 0px solid #fd7e14;
}
.green-frame {
	border-top: 0px solid #28a745;
	border-bottom: 5px solid #28a745;
	border-left: 5px solid #28a745;
	border-right: 0px solid #28a745;
}

/* Position property */
.position-fixed-prop {
	z-index: 2;
	width: 100%;
}


/* 19.Menu*/

/* menu theme*/
.black-theme .nav-link {
	color: #fff !important;
}

.space.space-height {
    display: inline-block;
    height: 50px;
}
/*Menu Css*/
.f-nav {
	position: fixed;
	top: -60px;
	left: 0;
	width: 100%;
	background-color: #fff;
	z-index: 3;
}
/* Black Theme*/
.black-theme .f-nav {
	background-color: #000;
}

.navbar{
	padding: 0;
}
.navbar-brand img{
	height: 65px;
	width: auto;
	display: block;
	-webkit-transition : all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.navbar-toggler {
	float: right;
	border: none;
	padding-right: 0;
}
.navbar-toggler:active,
.navbar-toggler:focus {
	outline: none;
}
.navbar-light .navbar-toggler-icon {
	width: 24px;
	height: 17px;
	background-image: none !important;
	position: relative;
	border-bottom: 1px solid #000;
    transition: all 300ms linear;
}
.navbar-light .navbar-toggler-icon:after, 
.navbar-light .navbar-toggler-icon:before{
	width: 24px;
	position: absolute;
	height: 1px;
	background-color: #000;
	top: 0;
	left: 0;
	content: '';
	z-index: 2;
    transition: all 300ms linear;
}
.navbar-light .navbar-toggler-icon:after{
	top: 8px;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
	transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
	transform: translateY(8px) rotate(-45deg);
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
	border-color: transparent;
}
.nav-link{
	color: #000 !important;
	font-weight: 500;
    transition: all 200ms linear;
}
.pink-theme .nav-item:hover .nav-link{
	color: #8c2755 !important;
}
.blue-theme .nav-item:hover .nav-link{
	color: #007bff !important;
}
.dark-theme .nav-item:hover .nav-link{
	color: #343a40 !important;
}
.yellow-theme .nav-item:hover .nav-link{
	color: #ffc107 !important;
}
.orange-theme .nav-item:hover .nav-link{
	color: #fd7e14 !important;
}
.green-theme .nav-item:hover .nav-link{
	color: #28a745 !important;
}

.nav-item.active .nav-link{
	color: #777 !important;
}
.nav-link {
    position: relative;
    padding: 25px 5px !important;
    display: inline-block;
    text-transform: uppercase;
    font-weight: 600;
}
.nav-item:after{
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 100%;
	height: 2px;
	content: '';
	opacity: 0;
    transition: all 200ms linear;
}
.f-nav a.nav-link {
    color: #000 !important;
}
.pink-theme .nav-item:after{
	background-color:#8c2755;
}
.blue-theme .nav-item:after{
	background-color:#007bff;
}
.dark-theme .nav-item:after{
	background-color:#343a40;
}
.yellow-theme .nav-item:after{
	background-color:#ffc107;
}
.orange-theme .nav-item:after{
	background-color:#fd7e14;
}
.green-theme .nav-item:after{
	background-color:#28a745;
}

.nav-item:hover:after{
	bottom: 0;
	opacity: 1;
}

.nav-item{
	position: relative;
    transition: all 200ms linear;
}
.navbar-collapse.collapse.in {
	display: block;
}

/* 20.Home Start */


/* 21.Swiper Slider */
.bg-image{
	width:100%;
	background-size:cover !important;
	height:650px;
}
/* Swiper Slider Content my Title */
.slider-title{
	font-family: 'Cabin Sketch', cursive;
}
/* 22.Home Socisal Icon*/
.home-social{
	font-size:25px;
}
/* Home End*/



/* 23.About Starts*/
.about-section{
	height:100vh;
}
.about-info{
	list-style:none;
	padding:0px;
}
.about-info li{
	width:50%;
	float:left;
	margin-bottom:10px;
}

/* End About Section*/




/* 24.The Timeline */



.timeline ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    transition: all 0.5s linear;
    top:0
}

.timeline ul:before{
    content: "";
    display: block;
    width: 0;
    height: 100%;
    position: absolute;
    top:0;
    left:30px
}
.timeline.pink-theme ul:before{
	border:1px dashed #8c2755;
	}
	.timeline.blue-theme ul:before{
	border:1px dashed #007bff;
	}
	.timeline.dark-theme ul:before{
	border:1px dashed #343a40;
	}
	.timeline.yellow-theme ul:before{
	border:1px dashed #ffc107;
	}
	.timeline.orange-theme ul:before{
	border:1px dashed #fd7e14;
	}
	.timeline.green-theme ul:before{
	border:1px dashed #28a745;
	}
.timeline ul li{
    margin: 20px 60px 30px;
    position: relative;
    padding: 10px 20px;
    line-height: 20px;
}


.timeline ul li > span{
    content: "";
    display: block;
    width: 0;
    height: 100%;
	position: absolute;
    top:0;
    left:-30px
}

.timeline.pink-theme ul li > span{
	border:1px solid #8c2755;
}
.timeline.blue-theme ul li > span{
	border:1px solid #007bff;
}
.timeline.dark-theme ul li > span{
	border:1px solid #343a40;
}
.timeline.yellow-theme ul li > span{
	border:1px solid #ffc107;
}
.timeline.orange-theme ul li > span{
	border:1px solid #fd7e14;
}
.timeline.green-theme ul li > span{
	border:1px solid #28a745;
}

.timeline ul li > span:before{
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    left:-7.5px
}

/* 25.Timeline Color theme*/
.timeline.pink-theme ul li > span:before{
	border:2px solid #8c2755;
    }
	.timeline.blue-theme ul li > span:before{
	border:2px solid #007bff;
    }
	.timeline.dark-theme ul li > span:before{
	border:2px solid #343a40;
    }
	.timeline.yellow-theme ul li > span:before{
	border:2px solid #ffc107;
    }
	.timeline.orange-theme ul li > span:before{
	border:2px solid #fd7e14;
    }
	.timeline.green-theme ul li > span:before{
	border:2px solid #28a745;
    }
.timeline ul li > span:before{top:-10px}
.timeline ul li > span:after{top:95%}

.timeline .title{
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 5px
}

.timeline .info:first-letter{text-transform: capitalize;line-height: 1.7}

.timeline .name{
    margin-top: 10px;
    text-transform: capitalize;
    font-style: italic;
    text-align: right;
    margin-right: 20px
}


.timeline .time span{
    position: absolute;
    left: -100px;
    color:red;
    font-size:80%;
    font-weight: bold;
}
.timeline .time span:first-child{top:-16px}
.timeline .time span:last-child{top:94%}



/* 26.Services Section*/
.service-icon {
	font-size: 45px;
}
.service-list {
	padding: 15px;
	border: 1px solid #fff;
	margin: 10px 0;
}
/*Black theme border*/
.black-theme .service-list {
	border: 1px solid #313131;
}


.service-icon {
	position: relative;
	top: 0;
	transition: top ease 0.5s;
}
.service-list:hover .service-icon {
	top: 20px;
}

/* 27.Skils*/
.ser-exp {
    text-align: center;
    line-height: 30px;
    /* border: 1px solid #f2efef; */
    /* margin-bottom: 10px; */
    /* background: #f2efef; */
    /* padding: 15px; */
    /* height: 120px; */
    color: #fff;
    font-size: 20px;
}
.skill-icon {
    font-size: 60px;
    padding: 0px;
    display: block;
}
.skill-icon {
    font-size: 70px;
}
.progress{
	height:10px;
}
.progress-bar {
	font-size: 11px;
}

/* 28.portfolio*/
.as-col-3{
	width:20%;
	display:inline-block;
	margin:0px;
}

#portfolio-gallery .portfolio-item img{
	border: #5px solid #cacaca;
	
}
#portfolio-buttons button {
    border: 0;
    background: no-repeat;
}
#portfolio-buttons button {
    padding: 10px;
	outline:none;
	cursor:pointer;
	margin: 0 10px;
}
.pink-theme button:hover,
.pink-theme button.active {
	color: #8c2755 !important;
}
.blue-theme button:hover,
.blue-theme button.active {
	color: #007bff !important;
}
.dark-theme button:hover,
.dark-theme button.active {
	color: #343a40 !important;
}
.yellow-theme button:hover,
.yellow-theme button.active {
	color: #ffc107 !important;
}
.orange-theme button:hover,
.orange-theme button.active {
	color: #fd7e14 !important;
}
.green-theme button:hover,
.green-theme button.active {
	color: #28a745 !important;
}

.black-theme #portfolio-buttons button {
	color: #fff;
}
/* 29.typography */

.black-theme .typography-item {
	border:1px solid #313131;
}
.typography-item {
	border: 1px solid #e8e7e7;
	padding: 15px;
	border-radius: 0;
	border-radius: 5px;
	}

.client-image img {
	width: 80px;
	border-radius: 50px;
	box-shadow: 1px 1px 16px #ccc6c6;
	border: 1px solid #5b5858;
}
.client-name {
	font-size: 22px;
}
/* 30.Contact Form*/
#contact-form input,#contact-form textarea
{
	border: 1px solid #e6e6e6 !important;
	border-radius: 0 !important;
	color: #e6e6e6 !important;
	    height: 50px;
    font-size: 18px;
}

/* 31.Footer*/

/*black theme*/
.black-theme footer {
	background:#000;
	color:#fff;
}
footer {
	background: #e6e6e6;
	height: 100px;
	padding: 34px;
	color:#484646;
	text-align: center;
}
.top-header {
    
    background:#f3f6f9;
    color: #000;
}

.menubanner {
    border-bottom: 1px solid #d0cfcf;
}

a.btn {
    padding: 11px 20px;
}

ul.line-height2 li {
    line-height: 35px;
    font-weight: 600;
}
img.service-img {
    width: 80px;
    text-align: center;
    margin: 0 auto;
    display: block;
}
.footerinfo i {
    font-size: 47px;
    color: red;
}
#footer {

    background-color: #0c1239;
    background-image: url(../img/footer-bg.jpg);
}
.section-title {
    text-transform: uppercase;
}
.mainaddrss {
    border-bottom:1px solid #232951;
}

.lartext {
    font-size: 20px;
}

.section-title span::before {
    border-bottom: 1px solid red;
    padding: 10px;
    width: 80px;
	content: "";
	display:block;
}


.f-nav .navbar {
  
    padding: 0;
}

.bg-light-gray {
    background: #f3f3f3;
}

ul.list-style-none li {
    list-style: none;
}


.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 1 !important;
	    top: 70px;
}
div#navbarSupportedContent{
justify-content:left;}

textarea.textarea {
    width: 100%;
    height: 100px;
    border-color: #d6d6d6;
}

.modal-header {
    padding-top: 40px !important;
    background: #0042a5;
    color: #fff;
}
button.btn.btn-secondary {
    padding: 10px;
}
.smob a{ color: #000!important;}
input {
    height: 45px !important;
    font-size: 18px !important;
}

.modal-body {
    background:#0042a5;
	color: #fff;
}
.footer-menu li {
    line-height: 30px;
}

element.style {
}
ul.list-style-none.footer-menu {
    margin: 0;
    padding: 0px 15px;
}

.header-top-left {
    background: #ff6600;
    padding: 28px;
    line-height: 1px;
    color: #fff;
    font-weight: 500;
}

.no-padding {
    padding: 0 !important;
}
.header-top-left:after {
    position: absolute;
    content: "";
    top: 0px;
    right: 0px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 60px 22px;
    border-color: transparent transparent #f3f6f9 transparent;
}

.rtopbar {
    line-height: 50px;
    font-size: 16px;
    font-weight: 500;
    color: #151735;
}

.bannertext {
    visibility: visible !important;
	text-transform:uppercase;
}

span.totblo {
    padding: 38px;
    display: block;
    background: #e4e4e4;
}

.counter {
    font-size: 50px;
    font-weight: 700;
}

.servicesitem {
    padding: 20px;
 background:#fff;
    border-radius: 6px;
}
.servicesitem:hover,
.servicesitem.activecolor {
    background: #FF6600;
    color: #fff;
}
.servicesitem img,
.servicesitem:hover img,
.servicesitem.activecolor img {
    padding: 7px 0;
    background: #fff;
    border-radius: 6px;
}
#portfolio-buttons button.active,
#portfolio-buttons button:hover {
    background: #313131;
    border-radius: 3px;
}

.footercopy {
    border-top: 1px solid #4c4c4c;
}

.home-social a {
    background: #252835;
    padding: 10px 15px;
    font-size: 20px;
}

.logos {
    font-size: 28px !important;
    font-weight: 700;
    color: #083b58 !important;
}

.about-detail {
    padding: 0px 10px;
    text-align: justify;
}
.section-title {
    padding: 0 10px;
}

.no-padding-left {
    padding-left: 0 !important;
}
.no-padding-right {
    padding-right: 0 !important;
}
.textalign-center {
    text-align: center;
    margin: 0 auto;
    display: inline-table;
}
.about-image2 {
    margin-top: 14px;
}

a.viewsite {
    text-align: center;
    display: block;
    font-size: 30px;
    border: 1px solid #e6e6e6;
}