// 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=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

/* 2.body */
* {
	outline: none !important;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Josefin Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-size: 21px;
    color: #0e0e0e;
    font-weight: 300;
}
/* Black body theme*/
.black-theme {
	background: #9DD5BE;
	color: #122e33 ;
}

/* 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;
}


.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:#FBe4d4  !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:100px !important;}
h2 { font-size:40px !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:16px !important;}
h6 { letter-spacing: 1px; font-size: 12px !important; font-weight: 400 !important;}


/* 7.Text Color */
.text-blue{color: #007bff;}
.text-indigo{color: #6610f2;}
.text-purple{color: #6f42c1;}
.text-pink{color: #8c2755;}
.text-red{color: #dc3545;}
.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{color: #343a40;}
.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;
}


/* 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: #dc3545 !important;}
.bg-orange{background: #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: #FBe4d4 !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: #9DD5BE!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*/

.space.space-height {
    display: inline-block;
    height: 50px;
}
/*Menu Css*/
.f-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	z-index: 3;
}
/* Black Theme*/
.black-theme .f-nav {
	background-color: #000;
}
.navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,.5);
    font-size: 25px;
    font-weight: 400;
}

.navbar-brand img{
	height: 115px;
	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: 70px;
    height: 35px;
    background-image: none !important;
    position: relative;
    border-bottom: 2px solid #fff;
    transition: all 300ms linear;
}
.navbar-light .navbar-toggler-icon:after, .navbar-light .navbar-toggler-icon:before {
    width: 70px;
    position: absolute;
    height: 3px;
    background-color: #fff;
    top: 0;
    left: 0;
    content: '';
    z-index: 2;
    transition: all 300ms linear;
    line-height: revert-layer;
}
.navbar-light .navbar-toggler-icon:after{
	top: 16px;
}
.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:#122e33 !important;
	font-weight: 500;
    transition: all 200ms linear;
}
a.nav-link.active {
    color:#FBe4d4 !important;
}
.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: #FBe4d4 !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: 5px 0 !important;
	display: inline-block;
}
.nav-item:after{
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 100%;
	height: 2px;
	content: '';
	opacity: 0;
    transition: all 200ms linear;
}
.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:100vh;;
}
/* Swiper Slider Content my Title */
.slider-title{
	  font-family: "Josefin Sans", sans-serif;
}
/* 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;
}
.skill-icon {
    font-size: 30px;
}
.progress{
	height:10px;
}
.progress-bar {
	font-size: 11px;
}

/* 28.portfolio*/
.as-col-3{
	width:32%;
	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;
}
.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 p {
    color: #000000;
    font-weight: 300;
    padding-bottom: 4%;
}
.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: #404040 !important;
}


input#subject {
    color: #000 !important;
    cursor: pointer;
}

/* 31.Footer*/

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


.home-detail {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.home-detail h3 {
    font-size: 100px !important;
    font-weight: 300;
}

.liststyle-1 {
    padding: 29px 0;
    line-height: 24px;
}

.liststyle-1 h3 {
    line-height: 47px;
    font-weight: 200;
}

.section2-right {
    background: #FBe4d4;
    color: #000;
    padding: 45px 40px;
    border: 2px solid #858585;
}

.list-style-2 li {
    margin: 30px 0;
    font-weight: 300;
    font-size: 20px;
}
.section2-right h2 {
    font-size: 60px !important;
}
.linecode h2 {
    border-bottom: 2px solid #FBe4d4;
    display: inline-block;
}
.linecode-1 h2 {
    border-bottom: 2px solid #fff;
    display: inline-block;
    padding: 5px 33px;
}

.client-name {
    font-size: 18px;
    font-weight: 400;
}

.swiper-pagination3.swiper-pagination-clickable.swiper-pagination-bullets {
    text-align: center;
}
.swiper-slide {
    opacity: 0 !important;
}

.swiper-slide.swiper-slide-active {
    opacity: 1 !important;
}

section#typography {
    position: relative;
}

#contacts h4 {
    font-size: 35px !important;
    font-weight: 300;
    padding-bottom: 25px;
}
#contacts p {
    font-size: 25px;
}

#contacts1 h4 {
    font-size: 70px !important;
    font-weight: 300;
    padding-bottom: 25px;
}
#contacts1 p {
    font-size: 34px;
}

form#contact-form {
    background: #FBe4d4;
    padding: 25px;
}

.unlock h2 {
    font-size: 60px !important;
}

.container {
    max-width: 1300px;
}
.unlock {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aboutus img {
    margin-bottom: 17px;
   
}

.aboutleftimage img {
    margin-bottom: 200px;
    border: 6px dashed  #FBe4d4;
    border-style: double;
}
.section3-right {
    background:  #FBe4d4;
    color: #000;
    padding: 63px 119px;
    text-align: justify;
    font-size: 26px;
    line-height: 34px;
	 border: 2px solid #858585;
}
.section3-right h1,
.section4-right h1 {
    font-weight: 400;
    font-size: 60px !important;
}

.section4-right {
    padding: 0px 70px;
}

.section4-right p {
    font-size: 25px;
    text-align: justify;
}

.work-section .wnumber {
    text-align: center;
    font-size: 34px;
    background: #fff;
    display: inline-block;
    width: 80px;
    height: 80px;
    border-radius: 100px;
    color: #000;
    font-weight: 400;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.work-section .wtitle {
    font-size: 40px;
    padding: 15px 0;
}

.work-section .wintro {
    font-size: 22px;
}
.work-section .wnumber {
    text-align: center;
    font-size: 42px;
    background: #FBe4d4;
    display: inline-block;
    width: 90px;
    height: 90px;
    border-radius: 100px;
    color: #000;
    font-weight: 400;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.title1 {
    text-align: center;
    font-size: 34px;
}

.title1 h2 {
    font-size: 65px !important;
    letter-spacing: -3px;
    margin-bottom: 40px;
}

.work-section {
    text-align: center;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 80px;
}

footer {
    background: #FBe4d4;
    height: 100px;
    padding: 34px;
    color: #000;
    text-align: center;
    font-size: 17px;
}

.footerlink i, .footerlink a {
    color: #FBe4d4;
    padding: 0px 4px;
}
.footerlink {
    padding: 40px 0;
    font-size: 30px;
}

.footerlink-1 {
    text-align: center;
    font-size: 35px;
    padding-top: 30px;
}
.footerlink-1 a {
    padding: 10px;
}

.navbar-light .navbar-brand {
    color: rgba(0,0,0,.9);
    background: #FBe4d4;
    border-radius: 100%;
}

.visionmission i {
    font-size: 30px;
}
.visionmission h3 {
    font-weight: 400;
    padding: 10px 0;
}

section#typography {
    background: #FBe4d4;
}


.leaf img {
    width: 300px;
    border-radius: 100%;
}
.largetext h2 {
    font-size: 55px !important;
    line-height: 86px;
    text-align: left;
}
#contacts1 h3,
#contacts h3 {
    font-size: 36px !important;
    font-weight: 400;
    line-height: 60px;
}