*,
 *::before,
 *::after {
   box-sizing: border-box
 }

 html,
 body {
   font-family: 'DM Sans', sans-serif
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: 'PT Sans', sans-serif
 }

 body {
   transition: background-color .3s, color .3s
 }

 /* noise overlay */
 body::before {
   content: '';
   position: fixed;
   inset: 0;
   pointer-events: none;
   z-index: 0;
   opacity: .35;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E")
 }

 /* scrollbar */
 ::-webkit-scrollbar {
   width: 5px
 }

 ::-webkit-scrollbar-track {
   background: transparent
 }

 ::-webkit-scrollbar-thumb {
   background: #00a0e9;
   border-radius: 99px
 }

 /* reveal on scroll */
 .reveal {
   opacity: 0;
   transform: translateY(26px);
   transition: opacity .6s cubic-bezier(.4, 0, .2, 1), transform .6s cubic-bezier(.4, 0, .2, 1)
 }

 .reveal.in {
   opacity: 1;
   transform: none
 }

 .d1 {
   transition-delay: .08s
 }

 .d2 {
   transition-delay: .16s
 }

 .d3 {
   transition-delay: .24s
 }

 .d4 {
   transition-delay: .32s
 }

 /* nav underline animation */
 .nl {
   position: relative
 }

 .nl::after {
   content: '';
   position: absolute;
   bottom: -2px;
   left: 0;
   width: 0;
   height: 1.5px;
   background: currentColor;
   transition: width .22s cubic-bezier(.4, 0, .2, 1)
 }

 .nl:hover::after,
 .nl.on::after {
   width: 100%
 }

 .nl.on {
   font-weight: 500
 }

 /* shimmer button */
 .shimmer {
   position: relative;
   overflow: hidden
 }

 .shimmer::after {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 60%;
   height: 100%;
   background: rgba(255, 255, 255, .18);
   transform: skewX(-20deg);
   transition: left .4s cubic-bezier(.4, 0, .2, 1)
 }

 .shimmer:hover::after {
   left: 160%
 }

 /* photo frames */
 .pf {
   overflow: hidden;
   background: #d4d4d8
 }

 .pf img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block
 }

 /* card hover */
 .card-h {
   transition: transform .28s cubic-bezier(.4, 0, .2, 1), border-color .18s
 }

 .card-h:hover {
   transform: translateY(-4px)
 }

 /* skill tag */
 .stag {
   transition: border-color .18s
 }

 [x-cloak] {
   display: none !important
 }

 .service {
   padding: 40px;
 }

 .service .content-item {
   padding: 40px;
   border-left: 1px solid #d9e8f4;
   border-bottom: 1px solid #d9e8f4;
   margin: -1px;
 }

 .service .content-item span {
   display: block;
   font-size: 100px;
   margin-top: -60px;
   position: absolute;
   font-weight: 700;
   color: #00a0e91f;
 }

 .service .content-item h4 {
   font-size: 28px;
   font-weight: 400;
   padding: 0;
   margin: 20px 0;
 }

 .service .content-item ul {
   color: var(--p-color);
 }

 .service .content-item .bi {
   margin-right: 4px;
   font-size: large;
 }

 .service ul {
   list-style: none;
   padding-left: 0;
 }

 .service ul li {
   position: relative;
   padding-left: 22px;
   margin-bottom: 10px;
 }

 .service ul li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 9px;
   width: 7px;
   height: 7px;
   border: 1px solid #00a0e9;
   border-radius: 50%;
 }

 @media (max-width: 768px) {
   .service .content-item {
     padding: 40px 0;
     border-left: none;
   }
 }

 .text-truncate1 {
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }

 .text-truncate2 {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }

 .text-truncate3 {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }

 .text-truncate4 {
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }

 .text-truncate10 {
   display: -webkit-box;
   -webkit-line-clamp: 10;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }


 /*--------------------------------------------------------------
# skills 
--------------------------------------------------------------*/
 .skill {
   position: relative;
   width: 100%;
   margin: 0 auto !important;
   padding: 45px 0 15px 0;
 }

 @media (max-width: 500px) {
   .skill .skill-icon {
     display: none !important;
   }

   .skill .skill-text {
     width: 100% !important;
   }
 }

 .skill .skill-icon {
   position: relative;
   margin-left: .25rem;
   width: 150px;
   min-height: 150px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid #00a0e9;
   border-radius: 40% 70% 70% 30% / 41% 47% 53% 59%;
   background: var(--white-color);
 }

 .skill .skill-icon i {
   position: relative;
   font-size: 60px;
   color: var(--primary-color);
   transition: ease-in-out 0.3s;
 }

 .skill .skill-item:hover .icon {
   scale: 1.19;
 }

 .skill .skill-text {
   position: relative;
   width: calc(100% - 120px);
   padding: 0 20px;
 }

 .skill .skill-text h3 {
   font-size: 20px;
   font-weight: 700;
   transition: 1s;
 }

 .skill .skill-text .subtitle-skills {
   letter-spacing: 4px;
   font-size: 15px;
 }

 .skill .skill-text p {
   margin: 0;
   font-size: 16px;
   transition: ease-in-out 0.2s;
 }

 .skill .skill-item:hover .skill-text h3,
 .skill .skill-item:hover .skill-text p {
   color: #ffffff;
 }

 @media (max-width: 575.98px) {
   .skill .skill-text h3 {
     font-size: 16px;
     margin-bottom: 5px;
   }

   .skill .skill-text p {
     font-size: 14px;
   }
 }



 .skill .skill-item .modal-section .view-button:hover {
   font-weight: 600;
 }

 .skill .skill-item .modal-section .view-button i {
   font-size: 17px;
   transition: var(--transition);
   padding-left: 4px;
 }

 .skill .skill-item:hover .modal-section .view-button {
   background-color: #82bafa83;
   color: var(--white-color);
 }

 .skill .skill-item:hover .modal-section .modal-footer .btnClose {
   border: none;
   border-radius: 40px;
   background-color: #011a369f;
   transition: ease-in-out 0.6s;
 }

 .skill .skill-item:hover .modal-section .modal-footer .btnClose:hover {
   background-color: var(--primary-color);
 }


 .avatar-group {
   display: flex;
   align-items: center;
   justify-content: flex-end;
 }

 .avatar {
   border: 1px solid #00a0e9;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   overflow: hidden;
   margin-right: -10px;
 }

 .avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }



 /*--------------------------------------------------------------
# Experience
--------------------------------------------------------------*/
 .experience {
   position: relative;
   padding: 45px 0 15px 0;
 }

 .experience .timeline {
   position: relative;
   width: 100%;
 }

 .experience .timeline::after {
   content: '';
   position: absolute;
   width: 1px;
   border-radius: 20px;
   background: rgb(209, 209, 209);
   top: 0;
   bottom: 0;
   left: 50%;
   margin-left: -1px;
   z-index: -1;
 }

 .experience .timeline .timeline-item {
   position: relative;
   background: inherit;
   width: 50%;
   margin-bottom: 30px;
 }

 .experience .timeline .timeline-item.left {
   left: 0;
   padding-right: 45px;
 }

 .experience .timeline .timeline-item.right {
   left: 50%;
   padding-left: 45px;
 }

 .experience .timeline .timeline-item::after {
   content: '';
   position: absolute;
   width: 40px;
   height: 40px;
   top: 40px;
   right: -18px;
   background: #ffffff;
   border: 2px solid var(--secondary-color);
   border-radius: 50%;
   z-index: 1;
 }

 .experience .timeline .timeline-item.right::after {
   left: -18px;
 }

 .experience .timeline .timeline-item::before {
   content: '';
   position: absolute;
   width: 0;
   height: 0;
   top: 46px;
   right: 25px;
   z-index: 1;
   border: 10px solid;
   border-color: transparent transparent transparent #1a1717;
 }

 .experience .timeline .timeline-item.right::before {
   left: 25px;
   border-color: transparent #1a1717 transparent transparent;

 }

 .experience .timeline .timeline-date {
   position: absolute;
   width: 100%;
   top: 4px;
   font-size: 15px;
   font-weight: 700;
   color: rgb(167, 167, 167);
   text-transform: uppercase;
   letter-spacing: 0.8px;
   z-index: 1;
 }

 .experience .timeline .timeline-item.left .timeline-date {
   text-align: left;
   left: calc(100% + 55px);
 }

 .experience .timeline .timeline-item.right .timeline-date {
   text-align: right;
   right: calc(100% + 55px);
 }

 .experience .timeline .timeline-text {
   padding: 20px;
   background: #ffffff;
   position: relative;
   border-right: 6px solid #dddddd;
   box-shadow: 0 0 50px rgba(0, 0, 0, .09);
 }

 .experience .timeline .timeline-item.right .timeline-text {
   border-right: none;
   border-left: 6px solid #dddddd;
 }

 .experience .timeline .timeline-text h3 {
   margin: 0 0 10px 0;
   font-size: 18px;
   font-weight: 600;
 }

 .experience .timeline .timeline-text h3::after {
   content: "";
   display: block;
   width: 120px;
   height: 30px;
   background: rgba(0, 0, 255, 0.082);
   margin: 4px 0 -20px 0;
 }

 .experience .timeline .timeline-text p {
   font-weight: 400;
   margin: 0;
   font-size: 16px;
   line-height: 22px;
 }

 @media (max-width: 767.98px) {
   .experience .timeline::after {
     left: 14px;
   }

   .experience .timeline .timeline-item {
     width: 100%;
     padding-left: 50px;
   }

   .experience .timeline .timeline-item.left {
     padding-right: 0;
   }

   .experience .timeline .timeline-item.right {
     left: 0%;
     padding-left: 50px;
   }

   .experience .timeline .timeline-item.left::after,
   .experience .timeline .timeline-item.right::after {
     left: 0;
   }

   .experience .timeline .timeline-item.left::before,
   .experience .timeline .timeline-item.right::before {
     left: 30px;
     border-color: transparent #dddddd transparent transparent;
   }

   .experience .timeline .timeline-item.left .timeline-date,
   .experience .timeline .timeline-item.right .timeline-date {
     position: relative;
     top: 0;
     right: auto;
     left: 0;
     text-align: left;
     margin-bottom: 10px;
   }

   .experience .timeline .timeline-item.left .timeline-text,
   .experience .timeline .timeline-item.right .timeline-text {
     border-right: none;
     border-left: 5px solid #dddddd;
   }
 }