* {
  box-sizing: border-box;
}

body {
  background-color: #f4f2ee;
}

main {
  width: 100%;
  height: 100%;
  padding: 1rem 5rem;
}

@media(max-width:992.5px) {
  main {
    padding: 1px;
  }
}

.sec-right {
  height: 100vh;
}

.section-left {
  width: 75%;
}

.cover-profile-img {
  background: url(./assets//cover-img.png);
  background-repeat: no-repeat;
  background-size: 100%;
  object-fit: cover;
  height: 14rem;
  border-radius: 10px 10px 0px 0px;
  position: relative;
}

.profile-img {
  width: 10rem;
  height: 10rem;
  position: absolute;
  top: 55%;
  left: 8%;
}

.cover-edit {
  position: absolute;
  top: 8%;
  right: 10%;
}

.cover-edit i {
  color: blue;
  transition: 0.3s ease;
}

.cover-edit i:hover {
  color: darkblue;
}

.basic-info {
  gap: 01rem;
}

.basic-left {
  gap: 0.7rem;
}

.moble-view-company {
  display: none;
}

.people-newtwork a,
.contact-info-btn {
  text-decoration: none;
  font-weight: 600;
  color: #0d68c3;
}

.profile-btns {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
}

.profile-btns .btn-open {
  background-color: #0d68c3;
  font-weight: 600;
}

.profile-btns .btn-open:hover {
  background-color: darkblue;
}

.profile-btns .btn-add-section {
  font-weight: 600;
  border: 1.5px solid #0d68c3;
  color: #0d68c3;
}

.profile-btns .btn-add-section:hover {
  border: 2px solid #0d68c3;
  font-weight: 650;
}

.profile-btns .btn-more {
  border: 1.5px solid rgb(33, 33, 33);
  transition: 0.3s ease;
}

.profile-btns .m-btn {
  display: none;
}

.profile-btns .btn-more:hover {
  border: 2px solid black;
  font-weight: 700;
}

.activity .activity-btns button:hover,
.activity .activity-btns button:focus {
  background-color: green;
  color: #fff;
  transition: 0.3s ease;
}

.basic-right {
  position: relative;
}

.company {
  margin-top: 30%;
}

.company img {
  width: 2rem;
  height: 2rem;
}

.card1,
.card2 {
  cursor: pointer;
  width: 48%;
  height: 6rem;
}

.card1 a {
  margin-top: -0.5rem;
}

.card1:hover,
.card2:hover {
  background: rgba(173, 216, 230, 0.37);
}

.analytics hr {
  margin-top: -0.5rem;
}

.cards {
  gap: 1rem;
}

.detail-cards {
  cursor: pointer;
  transition: 0.3s ease;
}

.detail-cards:hover {
  background-color: lightgray;
}

.analytics button:hover,
.resources button:hover,
.interest button:hover,
.skills button:hover,
.license button:hover,
.activity button:hover {
  background-color: rgba(211, 211, 211, 0.567);
}

.about .about-text {
  width: 60%;
  font-size: 14px;
}

.interest {
  position: relative;
}

.interest .c-divider-1 {
  margin-top: -1.12rem;
  border: 1px solid gray;
}

.interest .c-m-divider {
  display: none;
}

.i-links .i-btn-1 a,
.i-links .i-btn-1 hr {
  color: gray;
  font-weight: 600;
  transition: 0.3s ease;
}

.i-links .i-btn-1:hover a {
  color: darkgreen;
}

.i-links .i-btn-1 hr {
  border: 2px solid;
  opacity: 0;
}

.i-links .i-btn-1:hover hr {
  border: 2px solid green;
  opacity: 1;
}

.c-card-1 .c-img img {
  width: 3rem;
  height: 3rem;
}

.c-cards {
  gap: 7rem;
}

@media (min-width: 375px) and (max-width: 768px) {
  main {
    padding: 0;
    display: block;
    overflow: hidden;
  }

  main .section-left {
    width: 100%;
  }

  main .sec-right {
    display: none;
  }

  main .section-left .basic-info .basic-right {
    display: none !important;
  }

  .basic-info .basic-left {
    width: 100% !important;
  }

  .basic-info .basic-left h3 {
    padding-top: 0rem !important;
  }

  .profile-img {
    top: 30%;
    width: 8rem;
    height: 8rem;
  }

  .basic-edit {
    top: 0%;
    right: 10rem;
    background-color: red;
  }

  .moble-view-company {
    display: block;
    font-size: 14px;
  }

  .profile-btns .btn-more {
    display: none;
  }

  .profile-btns .m-btn {
    display: block;
  }

  .card-slid {
    padding: 1rem;
  }

  .card-slid .card1 {
    width: 100%;
  }

  .card-slid .card2 {
    display: none !important;
  }

  .analytics .cards {
    flex-direction: column;
  }

  .interest .c-cards {
    flex-direction: column;
    gap: 1rem;
  }

  .interest .c-m-divider {
    display: block;
  }
}