/********************************************************************/
/* @Author Amjesh
/* Table of content
/* 1. General 
/* 2. Header section 
/* 3. Home section 
/* 4. Skill and about section 
/* 5. Counter section 
/* 6. Work history
/* 7. Pre Footer section
/* 8. Footer section
/********************************************************************/

html {
 scroll-behavior: smooth;
}

body {
 font-family: 'Roboto', sans-serif;
 font-size: 14px;
 font-weight: 500;
 background: #fefefe;
 background-color: #fbfbfb;
 overflow-x: hidden;
}

p,
strong {
 font-family: 'Roboto Condensed', sans-serif;
}

.bg-sticky {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 background-color: #222222;
 z-index: 99999;
}

.navbar .navbar-toggler-icon-custom {
 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(255,255,255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-light .navbar-toggler {
 border-color: #fff;
}

.navbar-light .navbar-brand {
 color: #fff;
 font-size: 2.5rem;
 margin-left: 4rem;
}

.navbar-light .navbar-brand:hover {
 color: rgb(212, 209, 209);
 font-size: 2.5rem;
}

.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:active,
.navbar-light .navbar-nav .nav-link:visited,
.navbar-light .navbar-nav .nav-link:focus {
 color: #fff;
 font-size: 1rem;
}

#hireMeModal .modal-body p {
 text-align: center;
 font-size: 1rem;
 margin-top: 25px;
}

#hireMeModal .modal-body a {
 text-align: center;
 display: block;
 font-size: 16px;
}

.headerContainer {
 z-index: 9;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 padding: 10px 0px;
 transition: all 0.5s;
}

/******************************************************************************/
/* Home Section css
/******************************************************************************/
.homeContainer {
 display: flex;
 flex-wrap: wrap;
 align-content: center;
 padding: 0;
 background: url('../images/home_bg.jpg') no-repeat center bottom;
 background-attachment: fixed;
 background-size: cover;
 height: 100vh;
 box-sizing: border-box;
 position: relative;
 width: 100%;
 box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.4);
}

.homeContainer .cvDownloadBtn {
 flex: 100%;
 text-align: center;
 z-index: 9999;
 margin-top: 60px;
}

.homeContainer .cvDownloadBtn a {
 border: 1px solid #fff;
 padding: 10px 40px;
 color: #fff;
 font-size: 18px;
 text-decoration: none;
}

.homeContainer .cvDownloadBtn a:hover {
 background-color: #04909e;
 opacity: 0.89;
}

.polygonSvgContainer {
 position: absolute;
 bottom: -32px;
 left: 0;
 width: 100%;
 z-index: 2;
}

.type {
 text-align: center;
 font-size: 3.5rem;
 font-weight: 700;
 font-family: inherit;
 word-spacing: 2px;
 letter-spacing: 2px;
 color: #fff;
 flex: 100%;
}

.type p {
 display: inline-block;
 white-space: nowrap;
 visibility: inherit;
 transition: none;
 border-width: 0px;
 margin: 0 0 0 8px;
 padding-right: 8px;
 min-height: 0px;
 min-width: 0px;
 max-height: none;
 max-width: none;
 opacity: 1;
 transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
 transform-origin: 50% 50% 0px;
}

.typed-cursor {
 display: inline-block;
 font-weight: 500;
 font-size: 3.3rem;
 color: #fff;
 opacity: 1;
 -webkit-animation: blink 1s infinite;
 -moz-animation: blink 1s infinite;
 animation: blink 1s infinite;
}

.title {
 flex: 100%;
 text-align: center;
}

.title h3 {
 color: #fff;
 margin: 0;
 font-size: 20px;
 letter-spacing: 2px;
 font-weight: 500;
 line-height: 1.2;
}

.social-head {
 flex: 100%;
 text-align: center;
 z-index: 1;
 margin-top: 35px;
}

.social-head ul {
 padding: 0;
 margin: 0;
 line-height: 1.2;
 display: flex;
 flex-direction: row;
 padding-left: 0;
 margin-bottom: 0;
 list-style: none;
 justify-content: center;
}

.social-head ul li {
 width: 40px;
 height: 40px;
 background-color: #fff;
 border-radius: 6px;
 margin: 5px 10px;
 padding: 0;
 box-shadow: 0 0 1px 2px rgb(255, 255, 255, 0.5);
}

.social-head ul li a {
 color: #04909ee8;
}

.social-head ul li i {
 font-size: 2.5rem;
}

.scrollDown {
 /* flex: 100%; */
 text-align: center;
 display: block;
 z-index: 99999;
}

.scrollDown a {
 position: absolute;
 top: 85%;
 left: 50%;
 width: 26px;
 height: 42px;
 -webkit-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 border: 2px solid #fff;
 border-radius: 26px;
}

.scrollDown a::after {
 position: absolute;
 top: 5px;
 left: 50%;
 width: 4px;
 height: 4px;
 margin-left: -2px;
 content: '';
 -webkit-transform: translateY(0) scaleY(1) scaleX(1) translateZ(0);
 transform: translateY(0) scaleY(1) scaleX(1) translateZ(0);
 -webkit-animation: scroll 1.5s -1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
 animation: scroll 1.5s -1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
 opacity: 1;
 border-radius: 100%;
 background-color: #fff;
}

@-webkit-keyframes scroll {
 0%,
 20% {
  -webkit-transform: translateY(0) scaleY(1) scaleX(1) translateZ(0);
  transform: translateY(0) scaleY(1) scaleX(1) translateZ(0);
 }

 10% {
  -webkit-transform: translateY(0) scaleY(1.2) scaleX(1.2) translateZ(0);
  transform: translateY(0) scaleY(1.2) scaleX(1.2) translateZ(0);
  opacity: 1;
 }

 to {
  -webkit-transform: translateY(20px) scaleY(2.5) scaleX(0.5) translateZ(0);
  transform: translateY(20px) scaleY(2.5) scaleX(0.5) translateZ(0);
  opacity: 0.01;
 }
}

@keyframes scroll {
 0%,
 20% {
  -webkit-transform: translateY(0) scaleY(1) scaleX(1) translateZ(0);
  transform: translateY(0) scaleY(1) scaleX(1) translateZ(0);
 }

 10% {
  -webkit-transform: translateY(0) scaleY(1.2) scaleX(1.2) translateZ(0);
  transform: translateY(0) scaleY(1.2) scaleX(1.2) translateZ(0);
  opacity: 1;
 }

 to {
  -webkit-transform: translateY(20px) scaleY(2.5) scaleX(0.5) translateZ(0);
  transform: translateY(20px) scaleY(2.5) scaleX(0.5) translateZ(0);
  opacity: 0.01;
 }
}

@-webkit-keyframes blink {
 0%,
 to {
  opacity: 1;
 }

 50% {
  opacity: 0;
 }
}

@keyframes blink {
 0%,
 to {
  opacity: 1;
 }

 50% {
  opacity: 0;
 }
}

/******************************************************************************/
/* skill and about Section css
/******************************************************************************/
.aboutContainer .img-thumbnail {
 height: 100%;
}

.about-box .about-title {
 color: #3d4451;
 padding-bottom: 25px;
 margin-bottom: 25px;
 border-bottom: 1px solid #dedede;
}

.about-box .about-title .hello-style {
 background-color: #1f9aa7;
 color: #fff;
 font-size: 14px;
 font-weight: 700;
 line-height: 1.1;
 display: inline-block;
 padding: 7px 12px;
 text-transform: uppercase;
 position: relative;
 margin-bottom: 28px;
}

.about-box .about-title .hello-style::before {
 border-left-color: #1f9aa7;
 content: '';
 width: 0;
 height: 0;
 top: 100%;
 left: 5px;
 display: block;
 position: absolute;
 border-style: solid;
 border-width: 0 0 8px 8px;
}

.about-box .about-title .author-title {
 font-size: 36px;
 line-height: 1.1;
 font-weight: 700;
 margin-bottom: 5px;
 color: #3d4451;
}

.about-box .about-title .author-position {
 font-size: 18px;
 font-weight: 600;
 line-height: 1.1;
 margin-bottom: 0;
}

.about-box .about-title p {
 font-weight: 600;
 margin-top: 10px;
}

.about-box .about-details {
 font-size: 14px;
 font-weight: 300;
 color: #5a5a5a;
 line-height: 2;
 margin: 0;
}
.about-box .about-more strong {
 font-size: 0.7rem;
}

.skillsContainer .h3 {
 text-align: center;
 font-size: 2.5rem;
 line-height: 45px;
 color: #303030;
 text-transform: capitalize;
}

.checked {
 color: orange;
}

.skill-rating {
 margin: 0 auto;
 background-color: #fff;
 padding: 15px 25px;
 min-width: 173px;
 box-shadow: 0 0 9px 4px rgb(0 0 0 / 20%);
}

.skill-rating h6 {
 text-align: center;
}

.skill-rating .ratting-number {
 margin-bottom: 0px;
 margin-top: 8px;
 font-weight: bold;
 text-align: center;
}

.star-ratings-css {
 unicode-bidi: bidi-override;
 color: #c5c5c5;
 font-size: 25px;
 height: 25px;
 width: 100px;
 margin: 0;
 position: relative;
 padding: 0;
 text-shadow: 0px 1px 0 #a2a2a2;
}

.star-ratings-css-top {
 color: #e7711b;
 padding: 0;
 position: absolute;
 z-index: 1;
 display: block;
 top: 0;
 left: 0;
 overflow: hidden;
}

.star-ratings-css-bottom {
 padding: 0;
 display: block;
 z-index: 0;
}

.infoContainer strong {
 font-size: 14px;
 font-weight: 600;
}

/******************************************************************************/
/* Counter Section css
/******************************************************************************/
.counterContainer {
 min-height: 150px;
 background-color: rgba(0, 0, 0, 0.69);
 margin-top: 2.5rem;
}

.counterContainer .counter-box {
 width: 100%;
 color: #fff;
 text-align: center;
}

.counterContainer .counter-box h1 {
 font-weight: bolder;
 font-size: 5rem;
 margin: 10px 0;
 -webkit-transition: all 300ms linear;
 -moz-transition: all 300ms linear;
 -o-transition: all 300ms linear;
 transition: all 300ms linear;
}

/******************************************************************************/
/* Work history Section css
/******************************************************************************/
.circle {
 padding: 13px 20px;
 border-radius: 50%;
 background-color: #ed8d8d;
 color: #fff;
 max-height: 50px;
 z-index: 2;
}

.how-it-works.row .col-2 {
 align-self: stretch;
}

.how-it-works.row .col-2::after {
 content: '';
 position: absolute;
 border-left: 3px solid #ed8d8d;
 z-index: 1;
}

.how-it-works.row .col-2.top::after {
 height: 90%;
 left: 50%;
 top: 10%;
}

.how-it-works.row .col-2.full-right::after {
 height: 100%;
 left: calc(50% - 0.2rem);
}

.how-it-works.row .col-2.full-left::after {
 height: 100%;
 left: calc(50% - 0px);
}

.how-it-works.row .col-2.bottom::after {
 height: 90%;
 left: calc(50% - 0.2rem);
 top: 0;
}

.timeline div {
 padding: 0;
 height: 40px;
}

.timeline hr {
 border-top: 3px solid #ed8d8d;
 margin: 0;
 top: 17px;
 position: relative;
}

.timeline .col-2 {
 display: flex;
 overflow: hidden;
}

.timeline .corner {
 border: 3px solid #ed8d8d;
 width: 100%;
 position: relative;
 border-radius: 15px;
}

.timeline .top-right {
 left: 50%;
 top: -50%;
}

.timeline .left-bottom {
 left: -50%;
 top: calc(50% - 3px);
}

.timeline .top-left {
 left: -50%;
 top: -50%;
}

.timeline .right-bottom {
 left: 50%;
 top: calc(50% - 3px);
}

/******************************************************************************/
/* Show Case Section
/******************************************************************************/
.showCaseContainer {
 margin-top: 5rem;
}

#demo {
 padding: 5px;
 box-sizing: border-box;
 box-shadow: 0px 0px 25px 25px rgba(0, 0, 0, 0.2);
}

#demo .carousel-control-prev-icon,
.carousel-control-next-icon {
 height: 50px;
 width: 50px;
 outline: #fff;
 background-size: 100%, 100%;
 border-radius: 50%;
 background-image: none;
 background-color: rgba(0, 0, 0, 0.3);
 position: relative;
}

#demo .carousel-control-next-icon:after {
 content: '>';
 font-size: 55px;
 color: #000;
 position: absolute;
 top: -17px;
 left: 13px;
}

#demo .carousel-control-prev-icon:after {
 content: '<';
 font-size: 55px;
 color: #000;
 position: absolute;
 top: -17px;
 left: 13px;
}
#demo .carousel-indicators li {
 background-color: #000;
}

/******************************************************************************/
/* Pre Footer Section css
/******************************************************************************/
.preFooterSection {
 margin-top: 5rem;
 padding: 50px 0px;
 background-color: #222;
}

.preFooterSection ul.bottom-menu {
 list-style: none;
 margin-top: 20px;
}

.preFooterSection ul.bottom-menu li.cvBtn {
 margin-top: 3rem;
}

.preFooterSection ul.bottom-menu li.cvBtn a {
 border: 1px solid #aaa;
 background-color: transparent;
 color: #aaa;
 text-decoration: none;
 outline: none;
 padding: 10px;
}
.preFooterSection ul.bottom-menu li.cvBtn a:hover {
 background-color: #aaa;
 color: #222;
}

.preFooterSection ul.bottom-menu li {
 margin: 10px;
 font-size: 18px;
}

.preFooterSection ul.bottom-menu li a {
 color: #aaa;
}

.preFooterSection ul li {
 color: #aaa;
}

.preFooterSection ul.contact-me li {
 list-style: none;
 margin: 10px;
}

.preFooterSection ul.contact-me li a {
 color: #aaa;
}

.preFooterSection ul.contact-me li.list-header {
 margin-bottom: 0px;
 font-size: 18px;
 font-weight: 600;
}

.preFooterSection ul.contact-me li.contact-text {
 font-size: 16px;
}

.preFooterSection ul.contact-me li.social-media {
 font-size: 32px;
 display: inline-block;
}

.preFooterSection ul.contact-me li.social-media a i {
 color: #b3b3b3;
}

.preFooterSection ul.contact-me li.social-media a i:hover {
 color: #444;
}

/******************************************************************************/
/* Footer Section css
/******************************************************************************/
footer {
 background-color: #1d1d1d;
 padding: 20px 0px;
}

footer p {
 text-align: center;
 margin-bottom: 0;
 color: #fff;
}

footer a {
 text-align: center;
 display: block;
}

@media only screen and (max-width: 600px) {
 .type {
  font-size: 1.5rem;
 }

 .typed-cursor {
  font-size: 1.4rem;
 }

 .polygonSvgContainer {
  bottom: -2px;
 }
 .about-box {
  margin-top: 2rem;
  text-align: center;
 }
 .about-details {
  text-align: justify;
 }
 .about-more {
  text-align: justify;
  margin-top: 1.5rem;
 }
}

@media only screen and (max-width: 990px) {
 .navbar-light .navbar-brand {
  margin-left: 0px;
 }

 .navbar-collapse {
  border-top: 1px solid #fff;
 }

 .bg-transparent .navbar-collapse {
  background-color: rgba(255, 255, 255, 0.95);
  padding: 10px;
 }

 .bg-transparent .navbar-nav .nav-link,
 .bg-transparent .navbar-nav .nav-link:hover,
 .bg-transparent .navbar-nav .nav-link:active,
 .bg-transparent .navbar-nav .nav-link:visited,
 .bg-transparent .navbar-nav .nav-link:focus {
  color: #222;
 }

 .bg-sticky .navbar-light .navbar-nav .nav-link,
 .bg-sticky .navbar-light .navbar-nav .nav-link:hover,
 .bg-sticky .navbar-light .navbar-nav .nav-link:active,
 .bg-sticky .navbar-light .navbar-nav .nav-link:visited,
 .bg-sticky .navbar-light .navbar-nav .nav-link:focus {
  color: #fff;
 }
}

.blogContainer {
 background-color: rgb(224 145 54);
 width: 100%;
 height: 100vh;
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
}

.blogContainer div {
 display: block;
 text-align: center;
}

.blogContainer h1 {
 font-size: 4rem;
 margin-bottom: 0px;
}

.blogContainer h3 {
 font-size: 1rem;
 margin-top: 0px;
}

.blogContainer a {
 text-align: center;
 display: inline-block;
 color: #222;
 background-color: #fefefe;
 border: none;
 width: 100px;
 height: 35px;
 border-radius: 5px;
 box-shadow: 0px 0px 2px 3px rgb(255 255 255 / 50%);
 line-height: 2;
 text-decoration: none;
}