.main-content {
  position: relative;
}

.main-content .navbar-top {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  padding-right: 0 !important;
  padding-left: 0 !important;
  background-color: transparent;
}

@media (min-width: 768px) {
  .main-content .container-fluid {
    padding-right: 39px !important;
    padding-left: 39px !important;
  }
}

.container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 400px;
    margin: auto;
    /* text-align: center; */
    /* font-family: arial; */
    background-color: var(--card-bg-color);
}

.card>hr {
  margin-right: 0;
  margin-left: 0;
}

.card-body {
  padding: 1.5rem;
  flex: 1 1 auto;
}

.card-header {
  margin-bottom: 0;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, .05);
  background-color: #fff;
}

.card-header:first-child {
  border-radius: calc(.375rem - 1px) calc(.375rem - 1px) 0 0;
}

.personal-information {
    border: 1px solid #4d516e;
    max-width: 90%;
    margin: 0 auto 20px;
    padding: 15px;
    background-color: #282b3c;
}
.personal-information .col-sm-3 {
    flex: 0 0 33%;
    padding: 0;
    width: 33%;
    max-width: 100%;
}
.personal-information .col-sm-9 {
    flex: 0 0 66%;
    padding: 0;
    width: 66%;
    max-width: 100%;
}
.card-profile-image {
  position: relative;
  text-align: center;
  width: 90px;
  height: 90px;
}

.card-profile-image img {
    height: 100%;
    width: 100%;
}


.card-profile-stats {
  padding: 1rem 0;
}

.card-profile-stats>div {
  margin-right: 1rem;
  text-align: center;
}

.card-profile-stats>div:last-child {
  margin-right: 0;
}

.card-profile-stats>div .name {
  font-size: 1.1rem;
  font-weight: bold;
  display: block;
  text-transform: uppercase;
}

.card-profile-stats>div .description {
  font-size: .875rem;
  color: #adb5bd;
}

.heading {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .025em;
}

.description {
  font-size: .875rem;
}
.contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}
.contact-details {
    display: flex;
    flex-wrap: wrap;
}
.contact-details-item {
    justify-content: center;
    -webkit-justify-content: center;
    /*margin-bottom: 15px;*/
}
.contact-details-item h6 {
    display: none;
}
.contact-details li {
    flex: 0 0 33.33%;
    width: 100%;
    max-width: 33.33%;
    text-align: center;

}

.title {
	color: white;
	letter-spacing: 0em;
}
.contact-details-item.call .icon-circle {
    background-color: #42DF5C;
}
.contact-details-item.mail .icon-circle {
    background-color: #1A78EC;   
}
.contact-details-item.whatsapp .icon-circle {
    background-color: #52FA6F;
}
.contact-details-item.website .icon-circle {
    background-color: #00A9E8;
}
.contact-details-item.location .icon-circle {
    background-color: #e8002b;
}
.contact-details-item.pdf .icon-circle {
    background-color: #F30508;
}
.contact-details-item.facebook .icon-circle {
    background-color: #3b5998;
}
.contact-details-item.instagram .icon-circle {
      background: radial-gradient(circle at 33% 100%, #fed373 4%, #f15245 30%, #d92e7f 62%, #9b36b7 85%, #515ecf)
}
.contact-details-item.twitter .icon-circle {
    background-color: #1DA1F2;
}
.contact-details-item.linkedin .icon-circle {
    background-color: #0A66C2;
}
.contact-details-item.mail .fa {
    font-size: 40px;
}
.contact-details-item.location .fa, .contact-details-item.facebook .fa {
    width: 30px;
}
.contact-details-item.pdf .fa {
    font-size: 40px;
    width: 30px;
}
.contact-details-item.instagram .fa {
    width: 42px;
}
.contact-details-item .fa, .contact-details .icon-circle .fab {
    font-size: 50px;
    width: 40px;
}
h5,
.h5 {
  font-family: inherit;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: .5rem;
  color: #32325d;
  font-size: .8125rem;
}


.contact-details .icon-circle {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  background-color: var(--card-bg-color);
  color: #fff;
  height: 60px;
  width: 60px;
  border-radius: 10px;
}

/*New CSS*/

#code canvas {
    border: 10px solid #fff;
    border-radius: 10px;
    width: 100px;
}
form .form-control, form .input-group-text, form .custom-select, form .custom-file-label {
    background-color: transparent;
    border-color: #000328;
    border: 0 none;
    border-bottom: 1px solid;
    border-radius: 0;
}
.form-footer {
    width: 100%;
    text-align: center;
}
.form-footer .savebtn {
    box-shadow: 0 2px 6px #686868;
    background-color: #000000;
    border-color: #000;
    width: 100px;
    font-size: 14px;
}
.footer {
    background-color: #fff;
}
/*New CSS*/

@media screen and (min-width: 992px) {
    .personal-information {
        max-width: 100%;
    }
    .card .card-body {
        padding: 20px 15px;
    }
    .personal-information .col-sm-12.col-md-3, .contact-btn {
        padding: 0;
    }
}

@media screen and (max-width: 767px) {
    .card-profile-image {
        width: auto;
        height: 100%;
    }
}

@media screen and (max-width: 360px) {
    .contact-btn {
        flex-wrap: wrap;
    }
}