@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
body {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    line-height: 30px;
    color: #757575;
    position: relative;
}

html,
body {
    height: 100%;
}

a:focus,
input:focus,
textarea:focus,
button:focus {
    outline: 0 solid;
}

a:link a:active,
a:visited,
{
    text-decoration: none !important;
}

a,
a:hover {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
h11
{
    //font-family: Courier;
    font-weight: 700;
    color: #536b77; //87a2ae
}

h1 {
    //margin-top: 10px;
    padding: 10px;

}

.no-padding {
    padding-left: 0;
    padding-right: 0;
}

.no-margin {
    margin-left: 0;
    margin-right: 0;
}

.btn.focus,
.btn:focus {
    box-shadow: none;
}

/*CSS Start*/

/*Hero Area*/

.bg-1 {
    background-image: url(./assets/img/hero-bg-1.jpg)
}

.bg-2 {
    background-image: url(./assets/img/hero-bg-2.jpg)
}

.bg-3 {
    background-image: url(./assets/img/hero-bg-3.jpg)
}

.hero-bg {
    height: 1000px;
    background-size: cover;
    background-position: center;
    color: #fff;
}

.hero-area-wrapper {
    width: 100%;
    text-align: center;
    height: 100%;
}

/*hero-area-inner-B*/

.hero-area-inner-B {
    vertical-align: middle;
    height: 100%;
}

.hero-area-inner-B h1 {
    color: #000;
    text-transform: uppercase;
    position: relative;
    font-size: 60px;
}

.hero-area-inner-B h1:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    content: "";
    background: #000;
}

.hero-area-inner-B h1:after {
    position: absolute;
    background: #000;
    content: "";
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
}

/*hero-area-inner-W*/

.hero-area-inner-W {
    vertical-align: middle;
    height: 100%;
}

.hero-area-inner-W h1 {
    color: #fff;
    text-transform: uppercase;
    position: relative;
    font-size: 60px;
}

.hero-area-inner-W h1:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    content: "";
    background: #fff;
}

.hero-area-inner-W h1:after {
    position: absolute;
    background: #fff;
    content: "";
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
}

.btn.hero-btn-B {
    display: inline-block;
    border: 2px solid #000;
    line-height: 55px;
    padding: 0px 65px;
    border-radius: 0;
    text-transform: uppercase;
    color: #000;
    font-weight: 700;
}

.btn.hero-btn-W {
    display: inline-block;
    border: 2px solid #fff;
    line-height: 55px;
    padding: 0px 65px;
    border-radius: 0;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
}

.hero-btn:hover {
    background: #87b8ce;
    border-color: #87b8ce;
}

.hero-area-slider .owl-dots div {

    display: inline-block;    
    margin-right: 10px;
    width: 10px;
    height: 10px;
    background: transparent;
    margin-bottom: 10px;
    transition: 0.3s;
    border-radius: 50%;
    border: 2px solid #fff;
}

.hero-area-slider .owl-dots {

    position: absolute;
    display: inline-block;
    left: 50.3%;
    bottom: 32%;
    transform: translate(-50%, -50%);



}

.hero-area-slider .owl-dots div.active {
    background: #fff;
    border: 2px solid #fff;
}


/*Menu Logo*/

.menubar-area {
    background: #252E30; //1E2324B3; //252E30
}

.menubar-area .fixed-top {
    background: #252E30; //252E301E2324B3
    border-bottom: 1px solid #4B5456;
}

.menubar-area a {
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
}

.menubar-area li a {
    padding: 10px;
    transition: 0.3s
}

.menubar-area li {
    padding-top: 5px;
    padding-left: 15px;
}

.navbar-nav li a.active {
    color: #d3f1ff; //#87b8ce
}

li.nav-item a:hover {
    color: #87b8ce;
}

.menubar-area .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(211,241,255, 1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/*Target Area*/

.single-target-box h1 {
    font-size: 30px;
    text-transform: uppercase;
    margin-bottom: 40px;
    line-height: 30px;
    background: #f2f2f1;
}
.single-target-box {



    //line-height: 60px;
    margin-left: 18px;
}

.target-area {
    padding: 80px 0;
    //margin-left: 50px;
    background: #f2f2f1;
}

/*About*/



.about-area {
    background: #f2f2f1;
}


.single-about-box i.fa {
    font-size: 35px;
    float: left;
    color: #87b8ce;
}

.single-about-box {
    overflow: hidden;
    margin-bottom: 20px;
    margin-top: 50px;
}

.single-about-box h2,
.single-about-box p {
    padding-left: 50px;
}


.single-about-box h2 {
    font-size: 22px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.about-img {
    margin-right: 45px;

}

.about-img img {
    height: 100%;
}

.about-title {
    padding-top: 180px;
    //padding-left: -100px;
}

.about-text {
    //top: 50%;
    //font-size: 30px;
    //colot: #fff;
}

/*Skill*/

.skillbar h1 {
    font-size: 30px;
    text-transform: uppercase;
}

a.skill-btn {
    border: 2px solid #87b8ce;
    border-radius: 0;
    text-transform: uppercase;
    padding: 14px 40px 10px;
    font-weight: 700;
    color: #87b8ce;
    margin-top: 25px;
    transition: 0.3s
}

a.skill-btn:hover {
    background: #87b8ce;
    color: #fff;
}

.skill-progress .progress {
    height: 30px;
    border-radius: 0;
    margin-bottom: 30px;
}

.skill-progress .progress p {
    margin: 0;
    font-size: 18px;
    display: block;
    width: 100%;
    text-align: right;
    padding-right: 10px;
    color: #fff;
}

.skill-progress .progress-bar {
    background-color: #87b8ce;
}

.skill-progress p {
    text-transform: uppercase;
    margin-bottom: 10px;
    color: #566366;
    font-weight: 700;
    font-size: 22px;
}

.skill-progress {
    padding-top: 50px;
}

.skill-area {
    padding: 80px 0;
    background: #fff;//#f2f2f1;
}

/*Resume*/

.resume-area h1 {
    font-size: 30px;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.cmn-btn {
    display: inline-block;
    border: 2px solid;
    border-radius: 0;
    padding: 14px 30px 12px;
    text-transform: uppercase;
    font-weight: 700;
}

.cmn-btn.resume-btn {
    color: #87b8ce;
    border-color: #87b8ce;
    margin-top: 30px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 40px;
    transition: 0.3s
}

.resume-btn:hover {
    background: #87b8ce;
    color: #fff;
}

.resume-area {
    background: #f2f2f1;
    padding: 80px 0;
    position: relative;
    z-index: 2;
}

.resume-area:after {
    position: absolute;
    left: 50%;
    bottom: -50px;
    content: "";
    border-width: 25px;
    border-color: #f2f2f1 transparent transparent transparent;
    z-index: 3;
    border-style: solid;
    transform: translateX(-50%);
}

.resume-education {
    padding: 80px 0;
}

.edu h1 {
    font-size: 60px;
    text-transform: uppercase;
    margin-top: 40px;
}

.edu-detail-box {
    padding-top: 120px;
}

.single-edu h3 {
    font-size: 22px;
    text-transform: uppercase;
    margin-bottom: 5px;    
}

.edu-date span {
    font-weight: 600;
}

.edu-date {
    font-size: 16px;
    margin-bottom: 5px;
}

span.gpal {
    background: #661286;
    color: #fff;
    font-size: 12px;
    display: inline-block;
    padding: 1px 10px 0px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

span.gpak {
    background: #133aaa;
    color: #fff;
    font-size: 12px;
    display: inline-block;
    padding: 1px 10px 0px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

span.gpap {
    background: #e0001f;//#aa1328;
    color: #fff;
    font-size: 12px;
    display: inline-block;
    padding: 1px 10px 0px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

span.gpan {
    background: #db9404;
    color: #fff;
    font-size: 12px;
    display: inline-block;
    padding: 1px 10px 0px;
    text-transform: uppercase;
    margin-bottom: 10px;088f00
}

span.gpaz {
    background: #277723;
    color: #fff;
    font-size: 12px;
    display: inline-block;
    padding: 1px 10px 0px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
span.gpab {
    background: #840000;
    color: #fff;
    font-size: 12px;
    display: inline-block;
    padding: 1px 10px 0px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
span.gpavl {
    background: #b769ff;
    color: #fff;
    font-size: 12px;
    display: inline-block;
    padding: 1px 10px 0px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
span.gpakk {
    background: #00a3d8;
    color: #fff;
    font-size: 12px;
    display: inline-block;
    padding: 1px 10px 0px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
span.gpaba {
    background: #c07d4c;
    color: #fff;
    font-size: 12px;
    display: inline-block;
    padding: 1px 10px 0px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

span.gpavz {
    background: #54cb00;
    color: #fff;
    font-size: 12px;
    display: inline-block;
    padding: 1px 10px 0px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

p.edu-summury {
    //border-bottom: 3px solid #ddd;
    padding-bottom: 20px;
}

.single-edu {
    margin-bottom: 30px;
    //border-bottom: 3px solid #ddd;
}

.single-line {
    margin-bottom: 30px;
    margin-left: -40px;
    border-bottom: 3px solid #ddd;
}


.whole-line {
    margin-bottom: 30px;
    margin-left: -750px;
    border-bottom: 3px solid #ddd;
}

.whole2-line {
    margin-bottom: 30px;
    margin-right: -10px;
    border-bottom: 3px solid #ddd;
}

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

.resume-education.work-exp {
    padding: 0 0;
    padding-top: 10px;
}

.resume-slider .owl-dots div {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 10px;
    border-radius: 50%;
    border: 2px solid #87b8ce;
    transition: 0.3s;
}

.resume-slider .owl-dots {

    position: absolute;
    display: inline-block;

    left: 50.4%;
    top: 65px;
    margin-bottom: 50px;
    transform: translate(-50%, -50%);
}

.resume-slider .owl-dots div.active {
    background: #87b8ce;
}


/*Testimonial*/

.testimonial-area {
    background: #f2f2f1;
    padding: 80px 0;
}
.iframe-container{ 
    position: relative; 
    //margin-right: -40px;
    width: 75%; 
    padding-bottom: 40%; 
    height: 0; 
} 


.iframe-container iframe{ 
    position: absolute; 
    top:40; 
    left: 0; 
    width: 100%; 
    height: 100%; }

.testimonial-area p {
    font-style: italic;
    font-size: 23px;
    line-height: 36px;
    margin-bottom: 50px;
}

.testimonial-area h4 {
    font-size: 18px;
    text-transform: uppercase;
    //position: absolute;
    //bottom: -40%;
}

.testimonial-slider .owl-dots div {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 10px;
    border-radius: 50%;
    border: 2px solid #87b8ce;
    transition: 0.3s;
}

.testimonial-slider .owl-dots {
    position: absolute;
    bottom: -50px;
    left: 50%;
    //margin-left: -47px;
    transform: translate(-50%, -50%);
}

.testimonial-slider .owl-dots div.active {
    background: #87b8ce;
}

/*Testimonial-2*/

.testimonial2-area {
    background: #f2f2f1;
    padding: 80px 0;
}
.iframe-container{ 
    position: relative; 
    width: 75%; 
    padding-bottom: 40%; 
    height: 0; } 


.iframe-container iframe{ 
    position: absolute; 
    top:40; 
    left: 0; 
    width: 100%; 
    height: 100%; }

.testimonial2-area p {
    font-style: italic;
    font-size: 23px;
    line-height: 36px;
    margin-bottom: 50px;
}

.testimonial2-area h4 {
    font-size: 18px;
    text-transform: uppercase;
}

.testimonial2-slider .owl-dots div {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 10px;
    border-radius: 50%;
    border: 2px solid #87b8ce;
    transition: 0.3s;
}

.testimonial2-slider .owl-dots {
    position: absolute;
    bottom: -50px;
    left: 50%;
    margin-left: -47px;
}

.testimonial2-slider .owl-dots div.active {
    background: #87b8ce;
}


/*Portfolio area*/

.class2-text {
    font-size: 13px;
    line-height: 200%;
    margin-left: -25px;
}


.protfolio-bg-1 {
    background-image: url(./assets/img/portfolio-bg-1.jpg);
}

.protfolio-bg-2 {
    background-image: url(./assets/img/portfolio-bg-2.jpg);
}

.protfolio-bg-3 {
    background-image: url(./assets/img/portfolio-bg-3.jpg);
}

.protfolio-bg-4 {
    background-image: url(./assets/img/portfolio-bg-4.jpg);
}

.protfolio-bg-5 {
    background-image: url(./assets/img/portfolio-bg-5.jpg);
}

.protfolio-bg-6 {
    background-image: url(./assets/img/portfolio-bg-6.jpg);
}

.protfolio-bg-7 {
    background-image: url(./assets/img/portfolio-bg-7.jpg);
}

.protfolio-bg-8 {
    background-image: url(./assets/img/portfolio-bg-8.jpg);
}

.protfolio-bg-9 {
    background-image: url(./assets/img/portfolio-bg-9.jpg);
}

.protfolio-bg-10 {
    background-image: url(./assets/img/portfolio-bg-10.jpg);
}

.protfolio-bg-11 {
    background-image: url(./assets/img/portfolio-bg-11.jpg);
}
.protfolio-bg-12 {
    background-image: url(./assets/img/portfolio-bg-12.jpg);
}
.protfolio-bg-13 {
    background-image: url(./assets/img/portfolio-bg-13.jpg);
}

.portfolio-container {
    overflow: hidden;
}

.portfolio-content {
    width: 32.76%;
    float: left;
    height: 300px;
    margin-bottom: 10px;
}

.portfolio-bg {
    height: 300px;
    background-size: cover;
    background-position: center;
    background-color: #ddd;
    transition: 0.3s ease-in-out;
    position: relative;
    z-index: 3;
}

.portfolio-items {
    height: 300px;
}

.portfolio-menu {
    background: #252e30;
    padding: 32px;
    height: 100%;
}

.portfolio-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.portfolio-menu li a {
    display: block;
}

.portfolio-menu h3 {
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.portfolio-menu li {
    font-size: 16px;
    transition: 0.3s;
}

.portfolio-menu li:hover {
    color: #fff;
    cursor: pointer;
}

.portfolio-bg-items {
    overflow: hidden;
}

.portfolio-content:hover .portfolio-bg {
    transform: scale(1.3);
}

.portfolio-content:hover .portfolio-bg-items:after {
    left: 0;
}

.portfolio-bg i.fa {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    //line-height: 30px;
    color: #fff;
    position: relative;
    padding-bottom: 174px;
    left: 50%;
    top: -50%;
    //color: #000;
    font-style: 
        //font-size: 30px;
        transform: translate(-50%, -50%);
    transition: all 0.6s;
}

.portfolio-bg:after {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #87b8ce;
    content: "";
    z-index: -1;
    opacity: 0.9;
    transition: all 0.5s ease-in-out;
}

.portfolio-content:hover .portfolio-bg:after {
    left: 0;
}

.portfolio-content:hover .portfolio-bg i.fa {
    top: 50%;
}

.protfolio-title h11 {
    font-size: 30px;
    text-transform: uppercase;
    margin-bottom: 50px;
}

.protfolio-title {
    margin-bottom: 80px;
}

.portfolio-area {
    padding: 80px 0;
}

.gears title {
    color: #fff;
    font-size: 30px;
    text-transform: uppercase;
    margin-bottom: 30px;
}

/*Contact*/

.contact-area {
    background: #252e30;
    padding: 80px 0;
}

.contact-details h1 {
    color: #fff;
    font-size: 30px;
    text-transform: uppercase;
    margin-bottom: 30px;
}




.contact-details {
    margin-bottom: 30px;
}

.contact-address {
    margin-bottom: 30px;
}

.contact-mail p span {
    color: #fff;
    margin-right: 25px;
    width: 40px;
    display: inline-block;
}

.contact-mail p {}

.contact-form label {
    color: #fff;
    font-size: 16px;
}

.contact-form input,
.contact-form textarea {
    border-radius: 0;
    background: #4b5456;
    border: 1px solid #4b5456;
    box-shadow: none;
}

.contact-form .form-control:focus {
    background: #4b5456;
    border: 1px solid #4b5456;
    box-shadow: none;
}

.contact-form textarea {
    resize: none;
}

.btn.submit-btn {
    background: #191f21;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 0;
    padding: 12px 50px 10px;
    margin-top: 20px;
    transition: 0.3s
}

.submit-btn:hover {
    cursor: pointer;
    background: #87b8ce;
}

.contact-form {
    margin-top: 60px;
}

.contact-form label span {
    color: #919191;
}

.footer-area {
    background: #191f21;
    padding: 60px 0;
}

.copyright {
    color: #4b5456;
    text-transform: uppercase;
    font-size: 14px;
}

.footer-social-links a {
    display: inline-block;
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    background: #4b5456;
    border-radius: 50%;
    font-size: 25px;
    margin-right: 10px;
}

.footer-social-links a i {
    color: #000;
    transition: 0.3s;
}

.footer-social-links a:hover i {
    color: #fff;
}

/*Scrollbar*/

.mCSB_inside > .mCSB_container {
    margin: 0
}

.mCSB_scrollTools .mCSB_draggerContainer {
    z-index: 3;
}

.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
    background-color: #2ECC71;
}



.mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-dark.mCSB_scrollTools .mCSB_draggerRail {
    background-color: #2ECC71;
}

//TL