*{
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Open Sans', serif;
  padding-top: 54px;
  background-color: #f1f1f1;
}
@media (min-width:992px) {
  body {
  padding-top: 0;
  padding-left: 17rem;
}
}


.alert-detail {
  font-size: 13px;
  font-style: italic;
  
}

#sideNav .navbar-nav .nav-item .nav-link {
  font-weight: 600;
  text-transform: uppercase;
}
#sideNav .navbar-nav .nav-item .nav-link:hover {
  color: #3b5998;
}
@media (min-width:992px) {
  #sideNav {
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 17rem;
  height: 100vh;
}
#sideNav .navbar-brand {
  display: flex;
  /* margin: auto auto 30px; */
  padding: .5rem;
}

#sideNav .navbar-collapse {
  display: flex;
  align-items: flex-start;
  flex-grow: 0;
  width: 100%;
  margin-bottom: auto;
  padding-top: 30px;
  border-top: 1px solid #3b3b3b;
  border-bottom: 1px solid #3b3b3b;
  padding-bottom: 30px;
}
#sideNav .navbar-collapse .navbar-nav {
  flex-direction: column;
  width: 100%}
#sideNav .navbar-collapse .navbar-nav .nav-item {
  display: block;
}
#sideNav .navbar-collapse .navbar-nav .nav-item .nav-link {
  display: block;
}
}
.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link {
  color: #3b5998;
}

.bg-primary {
  background-color: #363636 !important;
}

.btn-light {
background-color: #3b5998;
border-radius: 5px;
width: 100%;
padding-left: 40px;
padding-right: 40px;
border-color: #3b5998;
color: #e6f8f7;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.download-cv {
position: absolute;
bottom: 30px;
}
.alert-primary {
  background-color: #3b5998;
  border-color: #3b5998;
  color: #fff;
  border-radius: 0;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.alert-success {
  background-color: #429555;
  border-color: #429555;
  color: #fff;
  border-radius: 0;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.close {
  opacity: 1;
}
.download-cv li {
color: #f1f1f1;
list-style: none;
}
a {
color: #b7b7b7;
}
.bi-telephone {
  color: #b7b7b7;
}
@media(max-width:992px){
.download-cv {
  display: none;
}
}
/* 
#home {
  background-color: #2c2b30f6;
} */

.head-img {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 100px;
  border: 20px solid #3b5998;
  margin: auto;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
#home {
  position: relative;

}
.type-text-cover  {
  text-align: center;
  color: #f1f1f1 !important;
  padding-top: 15px;
  position: absolute;
  top: 100px;
  right: 0;
  left: 0;
}
.head-p {
  padding-left: 200px;
  padding-right: 200px;
}
h2 {
  font-weight: bold;
}
.bg-images img {
  width: 100%;
  height: 100vh;
}
.typewrite {
  padding-top: 15px;
  font-weight: bold;
  color: #b7b7b7;
  
}

/* about us */
#about-us .progress-wrap li {
  margin-top: 10px;
  font-size: 14px;
}
.progress-bar {
  background-color: #3b5998;
}
.progress {
  background-color: #d3d3d3;
}
.about-content ul {
  padding-left: 15px;
  padding-right: 15px;
}
.edu li {
  font-size: 14px;
 margin-top: 15px;
}
@media(max-width:576px){
  .edu {
    padding-left: 15px;
    padding-right: 15px;
  }
  .about-content {
    padding-top: 30px;
  }
  
 
  .video__icon {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 120px;
    margin-left: 38% !important;
    margin-right: 45%;
}
.typewrite {
  font-size: 19px;
}
h2 {
  font-size: 20px;
}
#sideNav .navbar-nav .nav-item .nav-link {
  font-size: 13px;
}
.alert-primary .close {
  margin-top: 10px;
}
}
.whatsap {
  color: #000 !important;
  font-size: 10px;
  font-weight: bold;
}
/* why hire me */
#why-hire-me {
  margin-top: 30px;
}
#why-hire-me .card {
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  border: unset;
  margin-top: 20px;
}

#why-hire-me .btn {
  width: 100%;
  background-color: #fff;
  border: unset;
  color: #363636;
  border-radius: 40px;
  margin-top: -65px;
  z-index: 99;
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: unset;
}

#why-hire-me .btn:hover {
  background-color: #fff;
  color: #363636;
}

#why-hire-me .card img {
  height: 200px;
  width: 100%;
}

#why-hire-me .e-color {
  height: 200px;
  width: 100%;
  background-color: #0b60a9c9;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  text-align: center;
  padding-top: 60px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  color: #d8d7d7;
}

#why-hire-me .card:hover .e-color {
  display: block;
}

/* my works */
#my-works .window {
  width: 100%;
  margin: auto;
  cursor: n-resize;
 /* border: 1px solid #c6c6c6; */
 box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  img {
    width: 100%;
    object-fit: cover;
    object-position: top;
    height: 270px;
    transition: 8s all ease;

    &:hover {
      object-position: bottom;
    }
  }
}

.experience .card {
  background-color: #3b5998;
  color: #f1f1f1;
  padding-left: 15px;
  padding-right: 15px;
  border: unset;
}
/* interests */
#interests {
  margin-top: 20px;
}

/* video */
 .video-cover {
  text-align: center;
  position: relative;
}

#interests .video-img {
  z-index: -999;
  width: 100%;
  height: 330px;
  overflow: hidden;
  border-radius: 5px;
}
.video-img img {
  width: 100%;
  border-radius: 5px;

}

.video-cover .btn {
  padding: 0px;
  z-index: 99;
  display: inline;
  position: relative;
  background-color: transparent;
  border: unset;
  -webkit-box-shadow: unset;
          box-shadow: unset;
}

 .video-cover i {
  color: #fff;
  font-size: 40px;
  padding-top: 5px;
}
 .video__icon {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 130px;
  margin-left: 45%;
  margin-right: 45%;
}

.video__icon .circle--outer {
  border: 1px solid #fff;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: relative;
  opacity: .8;
  -webkit-animation: circle 2s ease-in-out infinite;
  animation: circle 2s ease-in-out infinite;
}

.video__icon .circle--inner {
  background: rgba(255, 255, 255, 0.061);
  left: 15px;
  top: 15px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  opacity: .8;
}

.video__icon .circle--inner:after {
  content: '';
  display: block;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 58px;
  height: 58px;
  top: -4px;
  left: -4px;
  position: absolute;
  opacity: .8;
  -webkit-animation: circle 2s ease-in-out .2s infinite;
  animation: circle 2s ease-in-out .2s infinite;
}

.video__icon p {
  color: #000;
  text-align: center;
}

@-webkit-keyframes circle {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes circle {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0;
  }
}

/* #contact-us */
#contact-us {
  padding-bottom: 60px;
}
#contact-us span {
  color: red;
}
#contact-us li {
  list-style: none;
  line-height: 40px;
}
#contact-us .bi {
  color: #000;
  width: 30px;
  height: 30px;
  font-size: 20px;
}
#contact-us label {
  line-height: 10px;
  font-weight: bold;
  font-size: 13px;
}
#contact-us .btn {
  padding-left: 30px;
  padding-right: 30px;
  cursor: pointer;
  background-color: #3b5998;
  border-color: #3b5998;
}
@media(max-width:576px){
  #contact-us li {
    font-size: 13px;
  }
  #contact-us .bi {
    font-size: 13px;
  }
  p {
    font-size: 14px;
    
  }
  li {
    font-size: 13px !important;
  }
  h4 {
    font-size: 15px;
    font-weight: bold;
  }
  }
.form-control:focus {
  color: #666;
  border-color: #000;
  outline: 0;
  box-shadow: unset;
  background-color: #f1f1f1;
}
.form-control {
border-radius: 0;
background-color: #f1f1f1;
color: #666;
border-top: unset;
border-left: unset;
border-right: unset;
padding-left: 0px;
font-size: 13px;
}
/* footer */
#footer {
  margin-top: 60px;
  background-color: #363636;
 
}
.my-auto0 {
  padding-top: 40px;
  padding-bottom: 25px;
}
#footer h5 {
  color: #3b5998;
  font-size: 13px;
}
#footer span {
  border: 1px solid #3b5998;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #3b5998;
  border-radius: 4px;
}
#footer .bi {
  color: #f1f1f1;
}

#contact-us a{
color: #3b5998;
}
@media(min-width:992px){
.modal-dialog {
  min-width: 900px !important;
 }
}
.modal-content {
background-color: #f1f1f1 !important;
height: 400px;
padding-left: 15px;
padding-right: 15px;
}
@media(max-width:768px){
.head-p{
  padding: 15px;
}
}
.head-p {
  color: #b7b7b7;
}
#whatsap-chat-cover {
  width: 200px;
  position: fixed;
 z-index: 99999;
 right: 0;
 background-color: #075e54;
 bottom: 0;
 text-align: center;
 color: #fff;
 padding-top: 8px;
 border-radius: 20px 0px 0px 0px;
 box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}