/* Fonts */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* Colors */

:root {
   --primary : #1a253f;
   --dark : #151A33;
   --secondary : #2b55cc;
   --info : #4d79f6;
   --ternary : #848db3;
   --pure : #eff2f9;
   --fade : #7081b9;
   --mild : #8997bd;
   --footer : #212a4a;
   --black : #060b1b;
   --twitter : #4ac7ec;
   --dribble : #ff5da0;
   --success : #1ecab8;
   --danger : #f1646c;
   --dark-blue : #28365f;
   --dark-gray : #171f33;
   --yellow : #f3c74d;
}

/* Reset */

*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body{
   font-family: 'IBM Plex Sans', sans-serif;
   background: var(--dark);
   -webkit--font-smoothing: antialiased;
   height: 2700px;
}

h1, h2, h3, h4, h5, h6{
   margin: 0;
   line-height: 1;
}

/* Styles */

section{               /*  For every Section  */
   padding: 3rem;
}
main{
   width: 69%;
   background: var(--primary);
}
.container{
   max-width: 1100px;
   width: 69%;
   margin: 0 auto;
}

nav{
   background: var(--primary);
   padding: 1.6rem 0;
}
nav .inner{
   display: flex;
   align-items: center;
   justify-content: space-around;
}
nav .inner .logo{
   text-transform: uppercase;
   color: var(--pure);
   font-size: 18px;
   letter-spacing: 1px;
   font-weight: 500px;
}
nav .inner i{
   color: var(--info);
}
nav .inner button{
   background: var(--primary);
   border: none;
   padding: 0.6rem 1rem;
   color: var(--pure);
   font-size: 14px;
   border-radius: 4px;
}

/******* Profile  Section *******/

section.profile{
   background: var(--black);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 3rem;
   margin-top: 60px;
   clip-path: polygon(0 0,100% 0%, 100% 80%, 25% 100%, 0% 80%);
   padding-bottom: 4rem;
}
section.profile .left{
   flex: 2;
   display: flex;
   align-items: center;
}
section.profile .right{
   flex: 1;
}
section.profile .left h2{
   color: var(--fade);
   font-size: 24px;
   font-weight: 600;
   margin-bottom: 1rem;
}
/* Loading bar pseudo element */
section.profile .left .cd-headline.loading-bar .cd-words-wrapper::after{
   background: linear-gradient(to right, var(--secondary), var(--success));
}
section.profile .left p{
   color: var(--mild);
   font-size: 14px;
}
section.profile .left img{
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 20px;
}
section.profile .left .avtar-block span{
   position: relative;
   left: 98px;
   bottom: 42px;
   background: var(--info);
   width: 32px;
   height: 32px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--pure);
   box-shadow: 0 0 20px 0 rgba(32, 41, 54, 0.05);
   cursor: pointer;
}
section.profile .right ul.contact{
   list-style: none;
   margin-bottom: 1.6rem;
}
section.profile .right ul.contact li{
   color: var(--ternary);
   margin-bottom: 0.7rem;
   font-size: 14px;
}
section.profile .right ul.contact li i{
   font-size: 18px;
   margin-right: 0.3rem;
}
section.profile .right ul.social{
   list-style: none;
   display: flex;
   align-items: center;
}
section.profile .right ul.social li a{
   display: inline-block;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   color: var(--pure);
   line-height: 36px;
   text-align: center;
   margin-right: 1rem;
}
section.profile .right ul.social li:nth-child(1) a{
   background: var(--success);
}
section.profile .right ul.social li:nth-child(2) a{
   background: var(--twitter);
}
section.profile .right ul.social li:nth-child(3) a{
   background: var(--dribble);
}

.section-heading{
   font-size: 18px;
   font-weight: 700;
   color: var(--pure);
   margin-bottom: 3rem;
   text-shadow: 0 0 1px rgba(40, 54, 95, 0.1);
   position: relative;
}
.section-heading::after{
   content: '';
   height: 3px;
   width: 80px;
   position: absolute;
   top: 28px;
   left: 0;
   border-top: 2px dotted var(--danger);
}

/******* About Section *******/

section.about .content{
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 60px;
}
section.about .content h2{
   color: var(--info);
   font-size: 18px;
   line-height: 22px;
   font-weight: 700px;
   margin-bottom: 1.6rem;
}
section.about .content p{
   color: var(--ternary);
   line-height: 1.6;
   letter-spacing: 0.1px;
   margin-bottom: 1rem;
   font-size: 14px;
}
section.about .content .left button{
   background: rgba(77, 121, 246, 0.1);
   color: var(--info);
   padding: 4px 8px;
   font-size: 12px;
   border: none;
   line-height: 24px;
   outline: none;
   cursor: pointer;
}
section.about .content .right p span:nth-child(1){
   width: 130px;
   float: left;
   font-weight: 500;
   padding-right: 10px;
   display: block;
   position: relative;
}
section.about .content .right p span:nth-child(2){
   padding-left: 150px;
   display: block;
}
section.about .content .right p span:nth-child(1)::after{
   content: ":";
   position: absolute;
   right: 0;
   top: 0;
}

/******* Skills Section *******/

section.skills .content{
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
}
section.skills .content .left{
   display: grid;
   grid-template-columns: 1fr 1fr;
}
section.skills .content .left .heading{
   margin-bottom: 2rem;
}
section.skills .content .left .heading i {
   color: var(--fade);
   font-size: 52px;
}
section.skills .content .left h5{
   font-size: 16px;
   margin-top: 0.5rem;
   color: var(--mild);
}
section.skills .content .left p{
   font-size: 14px;
   color: var(--ternary);
   line-height: 1.6;
 }
 section.skills .content .left p.center{
   color: var(--fade);
}
section.skills .content .left .item{
   margin-bottom: 2rem;
   margin-left: 15px;
   position: relative;
}
section.skills .content .left .timeline-wrapper{
   border-left: 3px dotted var(--dark-blue);
}
section.skills .content .left .item::after{
   content: '';
   position: absolute;
   left: -1px;
   top: 5px;
   width: 10px;
   height: 10px;
   border: 2px solid var(--info);
   border-radius: 50%;
   margin-left: -21px;
}
section.skills .skills-wrapper .skills-box h4{
   color: var(--ternary);
   font-size: 14px;
   font-weight: 500;
   text-transform: uppercase;
   margin-bottom: 1rem;
}
section.skills .skills-wrapper .skills-box {
   margin-bottom: 4rem;
}
section.skills .skills-wrapper .skills-box .progress-wrap{
   background: #20294a;
   height: 6px;
   width: 100%;
   box-shadow: 0px 0px 1px 0.25px #4d79f6;
   border-radius: 10px;
   border: 2px solid var(--primary);
}
section.skills .skills-wrapper .skills-box .progress-wrap .progress-bar{
   display: block;
   height: 100%;
   width: 78%;
   background: var(--info);
   position: relative;
   transition: all 1s ease-in-out;
}
section.skills .skills-wrapper .skills-box .progress-wrap .progress-bar .tooltip{
   position: absolute;
   right: -15px;
   top: -38px;
   margin-top: 10px;
   color: var(--ternary);
   font-size: 16px;
   text-transform: uppercase;
}

/******* Counter Section  *******/

section.counter-section{
   display: grid;
   grid-template-columns: repeat(3, 1fr);     /* Or (1fr, 1fr, 1fr) */
   background: var(--dark-gray);
   text-align: center;
}
section.counter-section > div {
   display: flex;
   align-items: center;
}
section.counter-section > div i{
   font-size: 40px;
   margin-right: 10px;
   color: var(--success);
}
section.counter-section > div svg{
   margin-right: 5px;
}
section.counter-section > div h3{
   font-size: 22px;
   font-weight: 600;
   color: var(--fade);
   margin-bottom: 8px;
}
section.counter-section > div h5{
   font-size: 14px;
   color: var(--fade);
}

/******* Work Section *******/

section.work .wrapper{
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
   grid-gap: 30px;
}
section.work .portfolio ul{
   list-style: none;
   display: flex;
   justify-content: space-evenly;
}
section.work .portfolio ul li a{
   color: var(--fade);
   border-bottom: 2px solid transparent;
   padding: 10px 15px;
   font-size: 14px;
   letter-spacing: 2px;
}
section.work .wrapper .portfolio .tabs ul li a.active{
   border-color: var(--info);
   color: var(--info);
   transition: all .3s ease-in-out;
}
section.work .wrapper .portfolio .portfolio-wrapper{
   margin-top: 4rem;
   display: grid;
   grid-template-columns: repeat(3 ,1fr);
   /* display: flex; */
}
section.work .wrapper .portfolio .portfolio-wrapper .item{
   flex: 0 0 33.3333%;
   max-width: 33.33%;
}
section.work .wrapper .portfolio .portfolio-wrapper .item a img{
   display: block;
   width: 132px;
   height: 132px;
   object-fit: cover;
}
section.work .wrapper .slider-wrapper .icon-wrap{
   color: var(--info);
   font-size: 28px;
   text-align: center;
}
section.work .wrapper .slider-wrapper .slider{
   text-align: center;
}
section.work .wrapper .slider-wrapper p{
   color: var(--ternary);
   line-height: 1.6;
   margin-top: 1rem;
}
section.work .wrapper .slider-wrapper img{
   height: 60px;
   width: 60px;
   border-radius: 50%;
   margin-top: 1rem;
   object-fit: cover;
}
section.work .wrapper .slider-wrapper h2{
   color: var(--info);
   margin-top: 1rem;
   font-size: 16px;
}
section.work .wrapper .slider-wrapper h6{
   color: var(--ternary);
   margin-top: 1rem
}
section.work .wrapper .slider-wrapper .carousel{
   width: 100%;
}

/******* Brands Section *******/

section.brands .brand-wrapper{
   display: flex;
   align-items: center;
   justify-content: space-evenly;
   flex-wrap: wrap;
}
section.brands .brand-wrapper img{
   display: inline-block;
   width: 20%;
   height: 20%;
}

/******* Contact Section *******/

section.contact .wrapper{
   display: grid;
   grid-template-columns: 1fr 2fr;
   align-items: center;
   grid-gap: 60px;
   margin-top: 60px;
}
section.contact .wrapper .left .item{
   display: flex;
   align-items: center;
   margin-bottom: 30px;
}
section.contact .wrapper i{
   margin: 10px 20px;
   font-size: 25px;
   color: var(--info);
}
section.contact .wrapper h4{
   font-size: 16px;
   font-weight: 700;
   margin-bottom: 5px;
}
section.contact .wrapper .left .item span{
   color: var(--ternary);
}
section.contact .wrapper h4 + span{
   font-weight: 100;
   font-size: 14px;
}
.mail{
   color: var(--ternary);
}
.mail:hover{
   color: var(--pure);
}
section.contact .wrapper .right .form-group{
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 30px;
   align-items: center;
   margin-bottom: 20px;
}
section.contact .wrapper .right .form-group > div{
   display: flex;
   flex-direction: column;
}
section.contact .wrapper .right  label{
   color: var(--ternary);
   margin-bottom: 10px;
}
section.contact .wrapper .right .form-group input, section.contact .wrapper .right .text-area textarea{
   padding: 7px;
   border-radius: 4px;
   background: transparent;
   border: 1.5px solid var(--dark-blue);
   color: var(--info);
   font-size: 15px;
}
section.contact .wrapper .right .form-group input:focus, section.contact .wrapper .right textarea:focus{
   border-color: var(--secondary);
   outline: none;
}
section.contact .wrapper .right .text-area{
   display: flex;
   flex-direction: column;
}
section.contact .wrapper .right button{
   background: var(--info);
   padding: 10px 20px;
   color: var(--pure);
   border: none;
   margin-top: 10px;
   border-radius: 4px;
   font-size: 14px;
   cursor: pointer;
   transition: all 0.3s ease-in-out;
}
section.contact .wrapper .right button:hover{
   background: var(--secondary);
}

footer{
   background: var(--footer);
   padding: 2rem 0;
   text-align : center;
   font-size: 14px;
}
footer p {
   color: var(--ternary);
   margin: 5px 0;
   font-size: 10px;
}
footer p span{
   color: skyblue;
}

/* Media Queries */

@media (max-width: 1280px){
   .container{
       width: 70%;
   }
}
@media (max-width: 1063px){
   section.contact .wrapper .left{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: space-between;
   }
}
@media (max-width: 1024px){
   section.profile{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      clip-path: none;
   }
   section.profile .right{
      align-self: flex-end;
   }
   section.skills .content{
      display: block;
   }
   section.skills .content .left{
      margin: 4rem 0 4rem;
   }
   section.work .wrapper{
      display: block;
   }
   section.work .wrapper .slider-wrapper{
      margin-top: 2rem;
      margin-bottom: 6rem;
   }
   section.brands .brand-wrapper{
      flex-wrap: wrap;
   }
   section.contact .wrapper{
      display: block;
   }
}
@media (max-width: 720px){
   section.contact .wrapper .left{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: space-between;
   }
   section.about .content{
      display: block;
   }
   section.about .content .right{
      margin-top: 2rem;
   }
}
@media (max-width: 700px) {
    section.contact .wrapper .right .form-group{
        display: block;
    }
}
@media (max-width:560px) {
  section.counter-section{
      display: block;
  }
  section.counter-section > div{
      font-size: 8px;
      margin: 4rem auto;
  }
}
@media (max-width:400px) {
    .container{
       width: 100%;
    }
    section.profile .left{
        display: block;
    }
    section.profile .left .avtar-block + div{
        margin-bottom: 2rem;
    }
    section.work .wrapper .slider-wrapper .portfolio ul{
        overflow: hidden;
    }
    section.brands .brand-wrapper img{
        display: inline-block;
        width: 70%;
        height : 70%;
    }
}