/*----------------------------------------------------------------------*/
/*                            GENERAL                                   */
/*----------------------------------------------------------------------*/

@font-face {
      font-family: 'Helvetica';
      src: url('fonts/Helvetica.ttf') format('truetype');
}
@font-face {
      font-family: 'OpenSans';
      src: url('fonts/OpenSans-Regular.ttf') format('truetype');
      src: url('fonts/OpenSans-SemiBold.ttf') format('truetype');
}
@font-face {
      font-family: 'Questrial';
      src: url('fonts/Questrial-Regular.ttf') format('truetype');
}

:root{
      scroll-behavior: smooth;
      --black:  #443f3f;
      --back: #f2f3f4;
      --white: #fefcfc;  

}
*{
      box-sizing :border-box;
      font-family: 'Questrial', 'OpenSans', Helvetica;
      margin: 0;
      padding: 0;
}


/*----------------------------------------------------------------------*/
/*                            HEADER                                    */
/*----------------------------------------------------------------------*/

header {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: var(--white);
      transition: all 0.3s ease-in;
      box-shadow: 0px 2px 5px var(--black);
      z-index: 1;
      
}
.hidden-up{
      top: -47px;
}
#navigation{
      width:100%;
      max-width: 1200px;
      padding: 15px 30px;
      margin: 0 auto;
}
header div > nav{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-content: center;
      align-items: center;
      width: 100%;
}
nav > a{
      color: var(--black);
      text-decoration: none;
      transition: all 0.3s ease-in-out;
}
nav > a:hover{
      color: rgb(255, 94, 94);
      text-decoration: underline;
}
#navigation_show{
      position: fixed;
      position: fixed;
      top: 0;
      right: 0;
}
#menu-spread-arrow{
      background-color: var(--white);
      margin: 8px 8px;
      width: 30px;
      height : 30px;
      border: 1px solid rgb(191, 191, 191);
      border-radius: 50%;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
}
#menu-spread-arrow::before,
#menu-spread-arrow::after{
      content:"";
      display: inline-block;
      height: 12px;
      border:2px solid rgb(189, 189, 189);
      border-radius: 2px;
}
#menu-spread-arrow::before{
      position:relative;
      top: 9.5px;
      left: 9.5px
}
#menu-spread-arrow::after{
      position:relative;
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      transform: rotate(90deg);
      top: 3.5px;
      left: 11.5px;
}
#menu-spread-arrow:hover,
#menu-spread-arrow:hover::before,
#menu-spread-arrow:hover::after{
      cursor: pointer;
      border-color:var(--black);
}
#menu-spread-arrow:active{
      background-color: var(--back);
}

@media screen and (max-width:900px){
      .hidden-up{
            top: -220px;
      }
      header div > nav{
            flex-direction:column;
            gap: 5px;
            align-items: center;
            height: 100%;
            margin: 10px 0;
      }
      #wellcome span{
            display: block;
            height: 70px;
      }
      #wellcome h2{
            font-size: 32px;
            text-align: left;
      }
}

/*----------------------------------------------------------------------*/
/*                         BACKGROUNDS                                  */
/*----------------------------------------------------------------------*/

.parallax {

      background-image: url('images/laptop.jpg');
      background-attachment: fixed;
      background-position:left;
      background-repeat: no-repeat;
      background-size: cover;
      background-blend-mode:lighten;
    }


/*----------------------------------------------------------------------*/
/*                            MAIN                                      */
/*----------------------------------------------------------------------*/

main{
      transition: all 0.3s ease-in-out;
      font-size: 18px;
      line-height: 22px;
      text-align: justify;
}

.down{
      margin-top: 36px;
}
main > section{
      padding: 40px 0;
}
main > section:nth-child(even){
      background-color: var(--back);
}
main > section:nth-child(odd){
      background-color: var(--white);
}
.section-content{
      max-width: 1200px;
      margin: 0 auto;
}
h2{
      margin-top: 20px;
      margin-bottom: 40px;
      font-size: 40px;
      text-transform: uppercase;
      line-height: 40px;
}
h4{
      margin: 20px 0;
      font-size: 30px;
}
h5{
      margin-top: 20px;
}
p{
      margin-top: 20px;
}
img{
      height: 220px;
}
#top{
      display: flex;
      align-items: center;
}
#top > img {
      width: 200px;
      height: 200px;
}
#top + div{
      margin-left: 200px;
      position: relative;
      top: -60px;
}

#prof-list{
      color:rgb(232, 110, 28);
}
.center{
      text-align: center;
}
.container{
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-evenly;
      align-items: stretch;
      margin: 20px auto;
      gap: 20px;
      row-gap: 40px;
}
/* ----------------------- About me - My tools ----------------------- */
.icon{
      width:60px;
      height:60px;
      text-align: center;
      font-size: 14px;
      align-self: baseline;
}
.icon object{
      width: 40px;
}

/* ----------------------- My services ----------------------- */

.services > div,
.pricing > div{
      width: 280px;
      border: 1px solid black;
      box-shadow: 2px 2px 5px grey;
      padding: 10px;
      font-size: 16px;
}
.services img,
.pricing img{
      display: block;
      max-width:100%;
      height: 220px;
      margin: 0 auto;
}
.full-col{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
}
/* -------------------- Portfolio & Pricing -------------------- */

#portfolio-nav ul{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap:20px;
      list-style: none;
}
#portfolio-nav .active{
      color: red;
      
}
#portfolio-nav .active::before,
#portfolio-nav .active::after{
      content:"";
      width:10px;
      border-top:1px solid red;
      padding:10px;
      margin:2px;
      position:relative;
      top: 20px;
}


#portfolio-nav li:hover{
      color:rgb(232, 110, 28);
      cursor: pointer;
}

.scroll-view img{
      max-height: 350px;
}
.portfolio{
      width: 100%;
      overflow: hidden;
      text-align: center;
}
.portfolio > div{
      display:inline-block;
      width:400px;
      padding: 20px;
      background-color: var(--white);
      text-align: center;
      font-size: 16px;
      border: 1px solid black;
}
.portfolio > div:nth-child(1){
      position: relative;
      left: -100px;
      opacity: 0.2;
}
.portfolio > div:nth-child(3){
      position: relative;
      right: -100px;
      opacity: 0.2;
}
#clients > div{
      width: 500px;
      padding: 20px;
      margin: 10px;
      background-color: var(--white);
      text-align: center;
      font-size: 16px;
      border: 1px solid black;
}
/* #clients img{
      height: 250px;
} */
.period{
      font-size: 20px;
      padding:5px;
}
.price{
      font-size: 26px;
      font-weight: 600;
      padding: 10px;
      color: #7b5f5f;
}

/* --------------- Portfolio & Pricing - count --------------- */

form {
      gap: 10px;
      background-color: #c1b5b5;
      padding: 10px;
}
.column{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      max-width: 45%;
}
.pricing > div{
      width: 360px;
}
label{
      display: inline-block;
      min-width: 150px;
      padding-top:10px;
}

input,
select{
      font-size: 20px;
      padding: 2px;
      border:none;
      box-shadow: inset 2px 2px 5px rgb(193, 193, 193);
}
[type="number"]{
      text-align: right;
      width: 60px;
}
[type="checkbox"]{
      width:max-content;
      box-shadow: none;
}
button{
      font-size: 20px;
      padding: 5px;
      background-color: #c1b5b5;
      border: none;
      box-shadow: 2px 2px 5px grey, inset 2px 2px 5px rgb(214, 214, 214);
      color: white;
      font-weight: 600;
}
button:hover{
      background-color: #989191;
}
button:active{
      box-shadow: inset 2px 2px 5px grey, 2px 2px 5px rgb(214, 214, 214) ;
}
output{
      color: rgb(141, 8, 8);
      font-size: 900;
      font-size: 36px;
      line-height: 40px;
      text-align: center;
}
/* --------------- Testimonials - My statistic -------------- */
.statistic > .column {
      justify-content: center;
      gap: 30px;
}
.statistic > div{
      width: 200px;
      height: 200px;
      color: var(--white);
      font-size: 32px;
      font-weight: 600;
      border: 3px solid var(--white);
      border-radius: 15px;
      text-align: center;
      padding: 10px;
      box-shadow: 2px 2px 5px lightgray;
}
.statistic .column div:last-child{
      font-size: 48px;
}

/* ----------------------- Contacts ----------------------- */
.contacts > .column{
      width: 30%;
      font-size: 16px;
      justify-content: start;
}
.contacts-icon{
 height: 25px;
 padding-right: 5px;
 position: relative;
 top: 8px;
}
.contacts p{
      margin-top: 10px;
}

@media screen and (max-width:1220px){
      .section-content{
            margin: 0 20px;
      }
}
@media screen and (max-width:900px){
      .down{
            margin-top: 220px;
      }
      .contacts{
            flex-direction: column;
      }
      .contacts > div{
            max-width: 90%;
      }
      #top + div{
            margin-left: 30px;
      }
      #wellcome img{
            display: none;
      }
      .portfolio > div,
      #clients > div{
      width: 300px;
      padding: 10px;
      margin: 10px;
      background-color: var(--white);
      text-align: center;
      font-size: 16px;
      border: 1px solid black;
      }
      .portfolio img,
      #clients img{
            width: 100%;
      }
      output{
            font-size: 24px;
            line-height: 24px;
            text-align: left;
      }
      form {
            gap: 2px;
            padding: 5px;
      }
      .column{
            justify-content: end;
            max-width: 45%;
      }
      label{
            display: inline-block;
            font-size: 16px;
            min-width: 100px;
            padding-top:4px;
      }
      
      input,
      select{
            font-size: 16px;
            padding: 2px;
            border:none;
            box-shadow: inset 2px 2px 5px rgb(193, 193, 193);
      }

}

/* ----------------------- Other ----------------------- */

.other .column{
      max-width: 30%;
      align-items: center;
}
.other img{
       max-width: 200px;
}

/*----------------------------------------------------------------------*/
/*                           FOOTER                                     */
/*----------------------------------------------------------------------*/

footer{
      font-size: 14px;
}
footer p{
      margin-top: 5px;
}
footer span{
      font-weight: 600;
}
footer li{
      margin-left: 30px;
      list-style: square;
}
footer button{
      all: unset;
      padding: 2px 5px;
      border: 1px solid black;
      border-radius: 5px;
      cursor: pointer;
}
footer button:hover{
      box-shadow: 2px 2px 5px grey;
}