@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

:root {
   --color-primary: #3a8ced;
   --bg-color-primary: #12335e;
   --bg-color-black: #303030;
}

::-webkit-scrollbar {
   width: 8px;
}

::-webkit-scrollbar-track {
   background: rgb(208, 220, 255);
}

::-webkit-scrollbar-thumb {
   background: var(--color-primary);
   border-radius: 8px;
}
body {
   background: var(--bg-color-primary);
   color: var(--color-primary);
   font-family: "Poppins", sans-serif;
   margin: 0;
   padding: 0;
}
.main-wrapper {
   height: 81vh;
   margin: 9.5vh 4%;
   overflow: hidden;
}
.wrapper {
   display: flex;
}
span {
   font-weight: 600;
}
.card-title {
   font-size: 22px;
   font-weight: 600;
}
/* left side */
.left-side {
   flex-grow: 1;
   max-width: 30%;
   background: #000;
   display: block;
}

.cover-photo {
   height: 60vh;
   overflow: hidden;
   position: relative;
}
.cover-photo img {
   width: 100%;
   object-fit: cover;
}

.content-wrapper {
   display: flex;
   flex-direction: column;
}
.identity {
   color: #fff;
   display: block;
   width: 100%;
   padding-top: 10px;
}
.identity h3 {
   margin: 5px 5%;
   text-transform: uppercase;
   font-weight: 600;
   font-size: 20px;
}
.identity p {
   margin: 10px 5%;
   font-style: italic;
   text-transform: uppercase;
   font-size: 15px;
}
.cover-social {
   background-color: #000;
}
.cover-social ul {
   display: flex;
   list-style-type: none;
   padding: 0;
   text-align: center;
}

.cover-social ul li {
   flex-grow: 1;
   padding: 3px;
   margin: 0 auto;
   cursor: pointer;
   transition: all 0.3s;
}

.cover-social ul li:hover {
   background-color: var(--color-primary);
}

.cover-social ul li a {
   color: #fff;
   font-size: 25px;
}
.main-container {
   background: #fff;
   overflow: auto;
   height: 76vh;
}
.home-wrap h3 {
   font-size: 24px;
}
.home-wrap h1 {
   font-weight: bold;
   text-transform: uppercase;
   font-size: 32px;
}
.home-wrap h4 {
   font-size: 22px;
}
.home-wrap a {
   font-size: 18px;
   font-weight: bold;
}
.sub-heading {
   text-transform: uppercase;
   font-size: 24px;
   text-align: center;
}
hr {
   background-color: var(--color-primary);
   width: 30%;
}
.cta {
   font-size: 18px;
}
.portfolio-wrap .card {
   cursor: pointer;
}
.modal {
   cursor: default;
}
.modal-dialog {
   max-width: 600px;
}
.carousel {
   border-radius: 12px;
   overflow: hidden;
}
/* ======Right Side====== */
.right-side {
   flex-grow: 1;
   height: 100vh;
   max-width: 70%;
   background: #fff;
   display: block;
}
.right-side ul {
   display: flex;
   margin: 0;
   padding: 0;
   justify-content: space-around;
}
.nav {
   display: block;
}
.nav li {
   font-size: 18px;
}

/* Profile */
.profile-wrap .row {
   width: 70%;
}
.content {
   border-left: 4px solid var(--color-primary);
   padding-left: 24px;
}
.content i {
   position: absolute;
   left: -10px;
   top: 4px;
   font-size: 1;
}
.content .icon {
   color: white;
   background: var(--color-primary);
   border-radius: 50%;
   top: -34px;
   left: -22px;
   width: 40px;
   height: 40px;
   line-height: 40px;
}
.title {
   font-size: 18px;
}
.time-content {
   font-size: 18px;
}

/* Resume */
#resume .card {
   background: #f5f5f5;
   border-radius: 8px;
}

#resume .card-body .icon-skill i {
   display: inline-block;
   color: #fff;
   background-color: var(--color-primary);
   width: 56px;
   height: 56px;
   line-height: 56px;
   margin: 0 8px;
   text-align: center;
   position: relative;
   overflow: hidden;
   border-radius: 50%;
   font-size: 26px;
}

#resume .card-body {
   display: flex;
   align-items: center;
   flex-direction: column;
}
/* Portfolio */
.btn-secondary {
   font-size: 18px;
   padding: 4px 14px;
   background-color: #f1f1f1;
   color: var(--color-primary);
   border: none;
}
.btn-secondary:hover {
   color: var(--color-primary);
   background-color: #f1f1f1;
   box-shadow: 0px 4px 24px -8px rgba(0, 0, 0, 0.35);
   -webkit-box-shadow: 0px 4px 24px -8px rgba(0, 0, 0, 0.35);
   -moz-box-shadow: 0px 4px 24px -8px rgba(0, 0, 0, 0.35);
}
.btn-secondary.active {
   background-color: var(--color-primary);
   color: #fff;
}
.btn-secondary.active:hover {
   background-color: var(--color-primary);
   color: #fff;
}

.card {
   overflow: hidden;
}

.card-head {
   position: relative;
}
.card-hover {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #3a8bedd8;
   z-index: 10;
   padding: 30px;
   -webkit-transition: ease-in-out 0.4s;
   -moz-transition: ease-in-out 0.4s;
   -ms-transition: ease-in-out 0.4s;
   transition: ease-in-out 0.4s;
   opacity: 0;
}
.card-head:hover .card-hover {
   opacity: 100%;
}
.card-hover h5 {
   font-size: 18px;
   color: #fff;
   font-weight: bold;
}
.card-hover p {
   font-size: 16px;
   padding: 10px 0;
   color: #fff;
   display: flex;
   justify-content: center;
}
.modal-body .title {
   margin-top: 16px;
}
.list-tech {
   display: flex;
   align-items: center;
   gap: 4px;
}
.list-tech .tech {
   background-color: var(--bg-color-primary);
   color: #fff;
   padding: 2px 12px;
   border-radius: 50px;
   font-size: 12px;
}

.card-body i {
   font-size: 24px;
   float: right;
}

/* Contact */
.contact-wrap h4 {
   font-size: 18px;
}
/* =========================mobile========================= */
@media screen and (max-width: 900px) {
   .main-wrapper {
      overflow: visible;
      margin: 9.5vh 2%;
   }
   .main-container {
      overflow: hidden;
      height: auto;
   }
   .home-wrap h3 {
      font-size: 18px;
   }
   .home-wrap h1 {
      font-size: 22px;
   }
   .home-wrap h4 {
      font-size: 16px;
   }
   /* Left side */

   /* right side */
   .my-data {
      padding: 15px 4%;
   }
   .my-data .row {
      width: 100%;
   }
   .wrapper {
      flex-direction: column;
   }
   .left-side {
      max-width: none;
      height: auto;
   }
   .right-side {
      max-width: none;
      height: auto;
   }

   .cover-photo {
      height: 50vh;
   }
   .time {
      padding: 0 10px 0 0;
   }
   .time-content {
      font-size: 14px;
      line-height: 25px;
      font-weight: bold;
   }
   .title {
      font-size: 18px;
   }
   .my-resume {
      padding: 15px 4%;
   }
   .profile-wrap .row {
      width: 100%;
   }
   .about-title {
      font-size: 14px;
   }
}