@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Poppins&display=swap');

:root{
    --header-height:3rem;

    --hue-color:250;
    --first-color: hsl(var(--hue-color),69%,61%);
    --first-color-second: hsl(var(--hue-color),69%,61%);
    --first-color-alt: hsl(var(--hue-color),57%,53%);
    --first-color-lighter: hsl(var(--hue-color),69%,61%);
    --title-color: hsl(var(--hue-color),8%,15%);
    --text-color: hsl(var(--hue-color),8%,45%);
    --text-color-light: hsl(var(--hue-color),8%,65%);
    --input-color: hsl(var(--hue-color),70%,96%);
    --body-color: hsl(var(--hue-color),60%,99%);
    --scroll-bar-color:hsl(var(--hue-color),12%,90%);
    --scroll-thumb-color:hsl(var(--hue-color),12%,80%);
    --container-color:#fff;
    
    /* fonts sizes  */

    --big-font-size: 2rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1.125rem;
    --normal-font-size: .938rem;
    --small-font-size:.813rem;
    --smaller-font-size:.75rem;


    /* font bold  */
    --font-medium:500;
    --font-semi-bold:600;

    /* margins  */
    --mb-0-25:.25rem ;
    --mb-0-50:.5rem ;
    --mb-0-75: .75rem;
    --mb-0-1: 1rem;
    --mb-0-1-5: 1.5rem;
    --mb-0-2: 2rem;
    --mb-0-2-5: 2.5rem;
    --mb-0-3: 3rem;

    /* zindexes  */
    --z-tooltip:10 ;
    --z-fixed: 100;
    --z-model: 1000;

   

}
 /* font sizes for large deveices  */

 @media screen and (min-width:968px){
   :root{

    --big-font-size: 3rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size:.875rem;
    --smaller-font-size:.813rem;
   }
 }

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

 html{
    scroll-behavior: smooth;
 }

 body{
    margin:0 0 var(--header-height) 0;
    font-family: 'Poppins', sans-serif;
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
 }

 h1,h2,h3,h4{
    color: var(--title-color);
    font-weight: var(--font-semi-bold);
 }
 a{
    text-decoration: none;
 }
 img{
    width: 100%;
    height: auto;
 }
 ul{
    list-style: none;
 }

 /* reusable classes  */

 .section{
    padding:2rem 0 4rem;
 }
 .section__title{
  font-size: var(--h1-font-size);
 }

 .section__subtitle{
    display:block;
    font-size: var(--small-font-size);
    margin-bottom: var(--mb-0-3);
 }

 .section__title,.section__subtitle{
    text-align: center;
 }

 /* layout  */
 .container{
    max-width: 768px;
    margin-left: var(--mb-0-1-5);
    margin-right: var(--mb-0-1-5);
 }

 .grid{
    display: grid;
    gap: 1.5rem;
 }

 .header{
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    z-index: var(--z-fixed);
    background-color: var(--body-color);
 }

 /* navbar  */

 .nav{
    max-width: 968px;
    display: flex;
    justify-content: space-between;
    align-items:center;
    height: var(--header-height);
 }
 .nav__logo,.nav__toggle{
 color: var(--title-color);
 font-weight: var(--font-medium);
 }

 .nav__logo:hover{
    color: var(--first-color);
 }
 .nav__toggle{
    font-size: 1.1rem;
    cursor: pointer;
 }
 .nav__toggle:hover{
    color: var(--first-color);
 }

 @media screen and (max-width:768px){
    .nav__menu{
        position: fixed;
        bottom: -100%;
        left: 0;
        width: 100%;
        background-color: var(--body-color);
        padding: 2rem 1.5rem 4rem;
        box-shadow: 0 -1px 4px rgba(0,0,0,.15);
        border-radius: 1.5rem 1.5rem 0 0;
        transition: .3s;
    }
 }

 .nav__list{
    grid-template-columns: repeat(3,1fr);
    gap: 3rem;
 }
 .nav__link{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--small-font-size);
    color: var(--title-color);
    font-weight: var(--font-medium);
 }

 .nav__link:hover{
    color:var(--first-color);
 }
 .nav__icon{
    font-size:1.2rem;
 }
 .nav__close{
    position: absolute;
    right: 1.3rem;
    bottom:.5rem;
    font-size: 1.5rem;
    color: var(--first-color);
    cursor: pointer;
 }
 .nav__close:hover{
    color:var(--first-color-alt)
 }
 
 /* SHOW MENU  */
.show-menu{
    bottom: 0;
}

.active-link{
   color: var(--first-color);
}

/* HOME  */
.home__container{
   gap: 1rem;
}

.home__content{
   grid-template-columns: .5fr 3fr;
   align-items: center;
   padding-top: 3.5rem;
}

.home__social{
   display: grid;
   grid-template-columns: max-content;
   row-gap: 1rem;
}

.home__social-icons{
   font-size: 1.25rem;
   color: var(--first-color);
}
.home__social-icons:hover{
   color: var(--first-color-alt);
}

.home__blob{
   width: 200px;
   fill: var(--first-color);
}

.home__blob-img{
   width: 180px;
   /* width: 170px; */
}

.home__data{
   grid-column: 1/3;
}

.home__title{
   font-size: var(--big-font-size);
}
.home__subtitle{
   font-size: var(--h3-font-size);
   color: var(--text-color);
   font-weight: var(--font-medium);
   margin-bottom: var(--mb-0-75);
}

.home__discription{
   margin-bottom: var(--mb-0-2);
}

.home__scroll{
   display: none;
}

.home__scroll-button{
   color: var(--first-color);
   transition: .3s;
}
.home__scroll-button:hover{
   transform: translateY(.25rem);
}
.home__scroll-mouse{
   font-size: 2rem;
}

.home__scroll-name{
   font-size: var(--small-font-size);
   color: var(--title-color);
   font-weight: var(--font-medium);
   margin-right: var(--mb-0-25);
}
.home__scroll-arrow{
   font-size: 1.25rem;
}

/* BUTTONS  */

.button{
   display: inline-block;
   background-color: var(--first-color);
   color: #fff;
   padding: 1rem;
   border-radius: .5rem;
   font-weight: var(--font-medium);
}

.button:hover{
   background-color: var(--first-color-alt);
}
.button__icon{
   font-size: 1.25rem;
   margin-left: var(--mb-0-1-5);
   transition: .3s;
}

.button--flex{
   display: inline-flex;
   align-items: center;
}

/* //////////////////////////////ABOUT/////////////// */

.about__img{
   width: 200px;
   border-radius: .5rem;
   justify-self: center;
   align-self: center;
}
.about__description{
   text-align: center;
   margin-bottom: var(--mb-0-2-5);
}
.about__info{
   display: flex;
   justify-content: space-evenly;
   margin-bottom: var(--mb-0-2-5);
}
.about__info-name{
   font-size: var(--small-font-size);
}
.about__info-title{
   font-size: var(--h2-font-size);
   font-weight: var(--font-semi-bold);
   color: var(--title-color);
}
.about__info-name,.about__info-title{
   display: block;
   text-align: center;
}
.about__buttons{
   display: flex;
   justify-content: center;
}

/*////////////////////////// skills ////////////////////////// */

.skill__container{
   row-gap:0;
}
.skill__header{
   display: flex;
   align-items: center;
   margin-bottom: var(--mb-0-2-5);
   cursor: pointer;
}
.skill__icon,.skill__arrow{
   color: var(--first-color);
   font-size: 2rem;
}

.skill__icon{
   margin-right: var(--mb-0-75);
}

.skill__title{
   font-size: var(--h3-font-size);
}

.skill__subtitle{
   font-size: var(--small-font-size);
   color: var(--text-color-light);
}

.skill__arrow{
   margin-left: auto;
   transition: .4s;
}

.skill__titles{
   display: flex;
   justify-content: space-around;
   margin-bottom: var(--mb-0-50);
}

.skill__name{
   font-size: var(--normal-font-size);
   font-weight: var(--font-medium);
}

.skill__bar,.skill__percentage{
   height: 5px;
   border-radius: .25rem;
}
.skill__bar{
 background-color: var(--text-color-light);
}
.skill__percentage{
   display: block;
   background-color: var(--first-color);
}

.skill__html{
   width: 90%;
}
.skill__css{
   width: 70%;
}
.skill__js{
   width: 50%;
}
.skill__nodejs{
   width: 10%;
}
.skill__react{
   width: 30%;
}
.skill__express{
   width: 20%;
}
.skill__php{
   width: 30%;
}
.skill__firebase{
   width: 10%;
}
.skill__figma{
   width: 5%;
}
.skill__photoshop{
   width: 10%;
}
.skill__sketch{
   width: 10%;
}
.skill__list{
   row-gap: 1.5rem;
   padding-left: 2.5rem;
}

.skill__close .skill__list{
   height: 0;
   overflow: hidden;
}

.skill__open .skill__list{
   height: max-content;
   margin-bottom: var(--mb-0-2-5);
}

.skill__open .skill__arrow{
   transform: rotate(-180deg);
}

/* .qualification  */
.qualification__tabs{
   display: flex;
   justify-content: space-evenly;
   margin-bottom: var(--mb-0-2);
}

.qualification__button{
   font-size: var(--h3-font-size);
   font-weight: var(--font-medium);
   cursor: pointer;
}

.qualification__button:hover{
   color: var(--first-color);
}

.qualification__icon{
   font-size: 1.8rem;
   margin-right: var(--mb-0-25);
}

.qualification__data{
display: grid;
grid-template-columns: 1fr max-content 1fr;
column-gap: 1.5rem;
margin-bottom: var(--mb-0-2);
}

.qualification__title{
   font-size: var(--normal-font-size);
   font-weight: var(--font-medium);
}

.qualification__subtitle{
   display: inline-block;
   font-size: var(--small-font-size);
   margin-bottom: var(--mb-0-1);
}

.qualification__calender{
   font-size: var(--smaller-font-size);
   color: var(--text-color-light);
}

.qualification__rounder{
   width: 13px;
   height: 13px;
   background-color: var(--first-color);
   display: inline-block;
   border-radius: 50%;
} 
 .qualification__line{
   display: block;
   width: 1px;
   height: 100%;
   transform: translate(6px,-6px);
   background-color: var(--first-color);
}

.qualification [data-content]{
   display: none;
}

.qualification__active[data-content]{
   display: block;
}

.qualification__button .qualification__active{
   color: var(--first-color);
}

/* SERVICES  */
.services__container{
   gap: 1.25rem;
   grid-template-columns: repeat(2,1fr);
}

.services__content{
   position: relative;
   background-color: var(--container-color);
   padding: 3.5rem .5rem 1.25rem 1.5rem;
   border-radius: .25rem;
   box-shadow: 0 2px 4px rgba(0,0,0,.15);
   transition: .3s;
}
.services__content:hover{
   box-shadow: 0 4px 8px rgba(0,0,0,.15);
}

.service__icon{
   display: block;
   font-size: 1.5rem;
   color: var(--first-color);
   margin-bottom: var(--mb-0-1);

}

.service__title{
   font-size: var(--h3-font-size);
   margin-bottom: var(--mb-0-1);
   font-weight: var(--font-medium);
}

.services--button{
   cursor: pointer;
   font-size: var(--small-font-size);
}
.button--small{
   padding: .75rem 1rem;
}

.button--link{
   padding: 0;
   background-color: transparent;
   color: var(--first-color);
}
.button--link:hover{
   background-color: transparent;
   color: var(--first-color-alt);
}

.services--button:hover .button__icon{
   transform: translateX(.25rem);
}

.services__model{
   position: fixed;
   top: 0;left: 0;bottom: 0;right: 0;
   background-color: rgba(0, 0, 0, .5);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 1rem;
   z-index: var(--z-model);
   opacity: 0; 
  visibility: hidden; 
   transition: .5s;
}

.services__model-content{
   position: relative;
   background-color: var(--container-color);
   border-radius:.5rem ;
   padding: 1.5rem;

}

.services__model-services{
   row-gap: 1rem;
}
.services__model-service{
   display: flex;
   flex-direction: column;
}

.services__model-title{
   font-size: var(--h3-font-size);
   font-weight: var(--font-medium);
   margin-bottom: var(--mb-0-1-5);
}

.services__model-close{
   position:absolute;
   top:1rem;
   right: 1rem;
   font-size: 1.5rem;
   color: var(--first-color);
   cursor: pointer;

}

.services__model-icon{
   color: var(--first-color);
   margin-right: var(--mb-0-2-5);
}

/* active model  */

.active-model{
   opacity: 1;
   visibility: visible;
}

/* portfolio  */

.portfolio__container{
   overflow: initial;
   
}
.portfolio__content{
   padding: 0 1.5rem;
}

.portfolio__img{
   border-radius: .5rem;
   justify-self: center;
   width: 265px;
}

.portfolio__title{
   font-size: var(--h3-font-size);
   margin-bottom: var(--mb-0-50);
}

.portfolio__description{
   margin-bottom: var(--mb-0-75);
}

.portfolio__button:hover .button__icon{
   transform: translateX(.25rem);
}

.portfolio__button{
   margin-bottom: 2rem;
}

/**********Project in mind*********/
.project{
   text-align: center;
}

.project__bg{
   background-color: hsl(250, 69%, 61%);
   padding-top: 3rem;
}

.project__title{
   font-size: var(--h2-font-size);
   margin-bottom: var(--mb-0-75);
}

.project__description{
   margin-bottom: var(--mb-0-1-5);
}

.project__title, .project__description{
   color: #fff;
}

.project__img{
   width: 232px;
   justify-self: center;
}

.button__white{
   background-color: #fff;
   color: var(--first-color);
}
.button__white:hover{
   color: #fff;
}

/* testimonial  */


 .testimonial__data{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
 }

 .testimonial__img{
 width: 60px;
 height: 60px;
 border-radius: 50%;
 /* margin-right: var(--mb-0-75); */
 }

 .testimonial__name{
    font-size: var(--h3-font-size);
    font-weight: var(--font-medium);
 }

 .testimonial__client{
   font-size: var(--small-font-size);
   color: var(--text-color-alt);
   width: 100vw;
   margin: 0 auto;
   text-align: center;
 }

 .testimonial__description{
   margin-bottom: var(--mb-0-2-5);
 }

 .testimonial__icon-star{
   color: var(--first-color);
 }

 .stars{
 text-align: center;
 }
 .client{
   text-align: center;
 }

 .img{
   display: flex;
   align-items: center;
   justify-content: center;
 }

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

 /* contact me  */

  .contact__container{
   row-gap: 3rem;
  }

  .contact__information{
   display: flex;
   margin-bottom: var(--mb-0-2);
  }

  .contact__icon{
   font-size: 2rem;
   color: var(--first-color);
   margin-right: var(--mb-0-75);
  }

  .contact__title{
   font-size: var(--h3-font-size);
   font-weight: var(--font-medium);
  }

  .contact__subtitle{
    font-size: var(--small-font-size);
    color: var(--text-color-light);
  }

  .contact__content{
   background-color: var(--input-color);
   border-radius: .5rem;
   padding: .75rem 1rem .25rem;
  }

  .contact__input{
   width: 100%;
   background-color: var(--input-color);
   color: var(--text-color);
   font-family: var(--body-font);
   font-size: var(--normal-font-size);
   padding: .25rem .5rem .5rem .5rem;
   border: .5px solid var(--text-color-light);
   outline: none;
   border-radius: .5rem;
  }

  .contact__label{
   font-size: var(--smaller-font-size);
   color: var(--text-color-light);
  }

.no__border{
   border: none;
}

.contact__input:focus{
   border: .5px solid var(--first-color); 
}

.button1{
   border: none;
   outline: none;
}

.footer{
   padding-top: 2rem;

}
.footer__bg{
   background-color: var(--first-color-second);
   padding: 2rem 1rem 3rem;
}

.footer__title{
   font-size: var(--h1-font-size);
   margin-bottom: var(--mb-0-25);
}

.footer__subtitle{
   font-size: var(--small-font-size);
   color: black;
}

.footer p{
   color: var(--text-color-light);
   font-size: var(--small-font-size);
   text-align: center;
   margin-top: var(--mb-0-3);
}

.footer__links a:hover{
 
  color: var(--first-color-alt);
}

.footer__links{
   display: flex;
   flex-direction: column;
   margin-top: 1rem;
   row-gap: 1.5rem;
 
}

.footer__social{
   font-size: 1.25rem;
   margin-right: var(--mb-0-1-5);

}

.footer__social:hover{
   color: var(--first-color-alt);
}

.footer__title,.footer__subtitle,.footer__link,.footer__social{
   color: #fff;
}

.scroll-header{
   box-shadow: 0 -1px 4px rgba(0, 0, 0, .15);
}

.scrollup{
   position: fixed;
   right: 1rem;
   bottom: -10rem;
   background-color: var(--first-color);
   /* opacity: .8; */
   padding: 0 .3rem;
   border-radius: .4rem;
   z-index: var(--z-tooltip);
   transition: .4s;
   
}
.scroll__icon{
   color: white;
   font-size: 1.5rem;
   
}

.show-scroll{
  bottom: 5rem;
}

/* dark light theme  */

.nav__btns{
   display: flex;
   align-items: center;
}

.change-theme{
   font-size: 1.25rem;
   color: var(--title-color);
   margin-right: var(--mb-0-1);
   cursor: pointer;
}

.change-theme:hover{
   color: var(--first-color);
}

/* drak theme variables  */

body.dark-theme{

   
   --first-color-second: hsl(var(--hue-color),30%,8%);
   --title-color: hsl(var(--hue-color),8%,95%);
   --text-color: hsl(var(--hue-color),8%,75%);
   --input-color: hsl(var(--hue-color),29%,16%);
   --body-color: hsl(var(--hue-color),28%,12%);
   --container-color:hsl(var(--hue-color), 29%,16%);
   --scroll-bar-color:hsl(var(--hue-color),12%,48%);
   --scroll-thumb-color:hsl(var(--hue-color),12%,36%);
}

::-webkit-scrollbar{
   background-color: var(--scroll-bar-color);
   width: .60rem;
   border-radius: .5rem;
   
}

::-webkit-scrollbar-thumb{
   background-color: var(--scroll-thumb-color);
   border-radius: .5rem;
   height: .3rem;
}

::-webkit-scrollbar-thumb:hover{
  background-color: var(--text-color-light);
}


/* media devices  */

/* small devices */
@media screen and (min-width:350px) and (max-width:500px){
   .container{
      margin-left: var(--mb-0-1);
      margin-right: var(--mb-0-1);
   }

   .nav__menu{
      padding: 2rem .25rem 4rem;
   }

   .nav__list{
      column-gap: 0;
   }

   .home__content{
      grid-template-columns: 25fr 3fr;
   }

   .home__blob{
      width: 180px;
   }

   .skill__title{
      font-size: var(--normal-font-size);
   }

   .qualification__data{
      gap: .25rem;
   }

   .services__container{
      grid-template-columns: max-content;
      justify-content: center;
   }

   .services__content{
      padding-right: 3rem;
   }

   .services__model{
      padding: 0 .5rem;
   }

   .project__img{
      width:200px;
   }

   .testimonial__description{
      text-align: center;
      padding: 0 .5rem;
   }
}

/* medium devices  */
@media screen and (min-width:600px) and (max-width:2000px){
   .home__content{
      grid-template-columns: max-content 1fr 1fr;
   }

   .home__data{
      grid-column: initial;
   }

   .home__img{
      order: 1;
      justify-self: center;
   }

   .about__container,.portfolio__content,.project__container,.contact__container,.footer__container{
      grid-template-columns: repeat(2,1fr);
   }

   .qualification__sections{
      display: grid;
      justify-content: center;
      grid-template-columns: .6fr;
   }
   .testimonial__description{
      text-align: center;
      padding: 0 1rem;
   }

   .footer__bg{
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      margin-left: 3rem;
      
      
   }

   .header{
      top: 0;
      bottom: initial;
   }

   .header,.main,.footer__container{
      padding: 0 1rem;
   }

   .nav{
      height: calc(var(--header-height)+1.5rem);
   }

   .home{
      padding-left: 15rem;
   }
 
  

   .section__subtitle,.section__title{
      text-align: center;
   }

   .about{
      padding-left: 10rem;
   }

   .skill__container{
      padding-left: 25rem;
   }

   .qualification__container{
      padding-left: 20rem;
   }

   .contact__container{
      margin-left: 20rem;
   }

    .project__bg{
      padding-left: 15rem;
    }
 

  .third{
   position: relative;
   top: -244px;
   left: 755px;
  }

  .nav__btns{
   display: block;
  }

  .nav__close{
   display: none;
  }
  .header{
   display: flex;
   align-items: center;
   justify-content: space-between;
  }

  .nav__list{
    display: flex;
    align-items: center;
    margin-top: 1rem;
  }

  .uil-apps{
   display: none;
  }
 
}