/*
Author: Hadjer MELIK
Author URI: http://hadjermelik.com
*/


/* ==========================================================================
                            VARIABLES
========================================================================== */
:root {
    /* Colors: */
    --white: #FDFFFF;
    --yellow: #facc47;
    --pink: #F5AF90;
    --red: #C25040;
    --blue: #59BFC3;
    --grey: #5f6263;
    --black:#1e1f1f;

    /* Font size*/
    --fs-h1-banner:6rem;
    --fs-h2-banner:2rem;
    --fs-h3-banner:2.3rem;
    --fs-span-banner:3rem;
    --fs-h1:3.5rem;
    --fs-h2:3rem;
    --fs-h3:1.5rem;
    --fs-h4:1.5rem;
    --fs-h5:1.5rem;
    --fs-p:1rem;
}


@media (max-width: 1024px){
  :root{
  --fs-h1-banner:7.5rem;
  --fs-h2-banner:2.5rem;
  --fs-h3-banner:4rem;
  --fs-span-banner:4.5rem;
  --fs-h1:4rem;
  --fs-h2:2rem;
  --fs-h3:2.2rem;
  --fs-h4:1rem;
  --fs-h6:0.75;
  --fs-p:1.5rem;
  --fs-li:1.5rem;
  }
} 

/* responsive max lg*/
@media(max-width: 992px){
    :root{
        --fs-h1-banner:6.5rem;
        --fs-h2-banner:2.5rem;
        --fs-h3-banner:3rem;
        --fs-span-banner:4rem;
        --fs-h1:4rem;
        --fs-h2:2rem;
        --fs-h3:2.2rem;
        --fs-h4:1rem;
        --fs-h6:0.75;
        --fs-p:1.5rem;
        --fs-li:1.5rem;
    }
} 


@media(max-width: 820px){
  :root{
      --fs-h1-banner:6rem;
      --fs-h2-banner:2.5rem;
      --fs-h3-banner:3rem;
      --fs-span-banner:4rem;
      --fs-h1:4rem;
      --fs-h2:2rem;
      --fs-h3:2rem;
      --fs-h4:1rem;
      --fs-h6:0.75;
      --fs-p:1.5rem;
      --fs-li:1.5rem;
  }
} 

/*responsive tablette (max md)*/
@media(max-width: 768px) {
    :root{
      --fs-h1-banner:5.5rem;
      --fs-h2-banner:2rem;
      --fs-h3-banner:2.5rem;
      --fs-span-banner:3.3rem;
      --fs-h1:3rem;
      --fs-h2:2rem;
      --fs-h3:2rem;
      --fs-h4:1rem;
      --fs-h6:0.75;
      --fs-p:1.5rem;
      --fs-li:1.5rem;
    }
}  

/*responsive mobile (max sm)*/
@media(max-width: 576px) {
    :root{
        --fs-h1-banner:2.9rem;
        --fs-h2-banner:1.3rem;
        --fs-h3-banner:1.7rem;
        --fs-span-banner:2.8rem;
        --fs-h1:1.75rem;
        --fs-h2:1.5rem;
        --fs-h3:1.15rem;
        --fs-h4:1rem;
        --fs-h6:0.75;
        --fs-p:1rem;
        --fs-li:1rem;
    }   
  }

/* (iphone4)*/
@media (max-width: 320px){
  :root{
    --fs-h1-banner:2.2rem;
    --fs-h2-banner:1rem;
    --fs-h3-banner:1.2rem;
    --fs-span-banner:2.1rem;
    --fs-h1:1.75rem;
    --fs-h2:1.5rem;
    --fs-h3:1.15rem;
    --fs-h4:0.75rem;
    --fs-h6:0.75;
    --fs-p:1rem;
} 

}  

/* ==========================================================================
                            BODY
========================================================================== */    

body{
    background-color: var(--blue)!important;
}

.container{
  width: 100%;
}

/* ==========================================================================
                            NAVIGATION
========================================================================== */  

/*pointer*/
.circle {
  position: absolute;
  border: solid 1px var(--red);
  width: 20px; 
  height: 20px; 
  border-radius: 50%;
  background-color: var(--red);
  z-index: 2;
}


.DesktopNav{
/* Layout Properties */
  padding: 1%;
    
/* UI Properties */
  letter-spacing: 0px;
  opacity: 1;
  height: 5%;
}
    
.nav-link{
  color: var(--white)!important;
  text-transform: uppercase;
  font-weight: 700!important;
}


/* ==========================================================================
                        HEADER 
========================================================================== */


.logo{
  background: var(--yellow);
  width: 1f;
  height: 1f;
  border-radius: 50%;
}

img.logo.img-fluid{
  width: 70%;
}   

.btn-header{
  display: flex;
  align-items:start;
}

/* ==========================================================================
                           BOUTON
========================================================================== */  

.btn{
    color: var(--white);
    font: 700 20px Montserrat;
    letter-spacing: 1px!important;
    padding: 13px 20px 13px!important;
    outline: 0!important;
    background-color: var(--yellow);
    cursor: pointer!important;
    position: relative!important;
    user-select: none!important;
    -webkit-user-select: none!important;
    touch-action: manipulation!important;
    border-radius: 5px;
 }

 .btn:after {
    color: var(--yellow)!important;
    content: ""!important;
    border: 3px solid var(--pink);
    width: 100%!important;
    z-index: -1!important;
    position: absolute!important;
    height: 100%!important;
    top: 15px!important;
    left: 20px!important;
    transition: 0.2s!important;
    border-radius: 5px;
  }

  .btn:hover:after {
    top: 0px!important;
    left: 0px!important;
  }

  @media (min-width: 768px) {
    .btn {
      padding: 13px 50px 13px;
    }
  }


  .btn a{
    color: var(--white);
  }  

/* ==========================================================================
                            FONTS
========================================================================== */

    p,a,h1,h2,h3,h4,h5,h6{
        font-family: 'Montserrat', sans-serif;
        font-family: 'Open Sans', sans-serif;
    }

    h1,h2,h3,h4,h5,h6{
    text-transform: uppercase;
    }

    h1{
        font-size: var(--fs-h1);
        font-weight: 700;
        color:var(--yellow);
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    h2{
        font-weight: 700;
        color: var(--yellow);
        margin-top: 0;
        margin-bottom:2%;
        font-size: var(--fs-h2);
    }

    h3{
        font-size: var(--fs-h3);
        color:var(--pink);
        font-weight: 600;
    }

    h4{
        font-weight: 600;
        color:var(--pink);
        margin-top: 0;
        margin-bottom:3vh;
        font-size: var(--fs-h4);
    }

    p{
        font-size: var(--fs-p);
        line-height: 2;
        color: var(--grey);
    }

    a{
        text-decoration: none;
      }

    li{
      font-size: var(--fs-li);
    }

/* ==========================================================================
                        HOMEPAGE 
========================================================================== */

/***** BANNER *****/
.banner{
    height: 95%;
    padding: 1% 1% 0 1%;
    background-image: url(../img/triangle.svg),url(../img/nouille.svg);
    background-size: 110%;
    background-repeat: no-repeat;
}

.banner h1{
    color: var(--white);
    text-align: left;
    font-size: var(--fs-h1-banner);
    font-weight: 800;
    font-family:'montserrat', sans-serif;
    letter-spacing: 0px;
    padding-left: 5%;
    text-transform: uppercase;
    line-height: 8rem;
    margin-bottom:0.25rem;
}

h1 span.auto-type{
    color:var(--yellow);
    font-size:var(--fs-span-banner);
    text-transform: lowercase;
}

.banner h2{
    color: var(--white);
    font-size: var(--fs-h2-banner);
    text-transform: uppercase;
    text-align: center;
    padding-top: 0;
    margin-bottom: 0!important;
    margin-top: 0!important;
}


.banner h3{
  font-size: var(--fs-h3-banner);
  color: var(--red);
  font-weight: 800;
  padding-left: 5%;
  margin-top: 5%;
  margin-bottom:0% ;
}


.scroll-container .scroll{
  color: var(--red);
  font-size: var(--fs-h2-banner);
  text-align: center;
  padding-top: 0;
  margin-bottom: 0!important;
  margin-top: 0!important;
}


/***** BANNER END *****/


/***** SERVICES *****/

.services__boxe{
    margin-top: 3%;
    margin-bottom: 3%;
    background-color: var(--white);
    padding: 3vh;
    border-radius: 15px;
}


.services__boxes{
  display: flex;
  flex-direction: row;
  justify-content:space-evenly;
  margin-left: 5%;
  margin-right: 5%;
  }

.responsive__icone {
    margin-bottom: 15%;
    padding-top: 15%;
    height: 10vh;
}
.fa-2xl{
    font-size: 5em !important;
}

.services__boxe h3{
  display: flex;
  justify-content:left;
}

.services__boxe h4{
    font-size: 1.5em;
    padding-left: 1vw;
}

/***** SERVICES END *****/

.contact{
  margin-bottom: 3%;
}

.btn-contact{
  margin-bottom: 3%;
}
/* ==========================================================================
MEDIA QUERIES
========================================================================== */



@media (min-width: 1600px) {
  
  .DesktopNav{
    height: 10vh;
    padding-top: 5%;
  }

  .banner{
    padding-top: 10%;
    height: 100vh;
  }

  .scroll-container{
    margin-top: 10%;
  }
}  

@media (max-width: 1024px) { 
  #circle{
    display: none;
  }

  .responsive__icone{
    font-size: 1rem;
    margin-bottom:0%;
    padding-top: 10%;
    }

    .services__boxes{
    display: flex;
    flex-direction: column;
    padding:0%;
    }

    .services__boxe{
      width: 90%;
      margin-left: 0%;
    }

    .services__boxe h3{
      margin-bottom: 3%;
    }

    .btn{
      font-size: 2rem;
      margin-top: 8%;
    }

    .DesktopNav{
      height: 15vh;
      padding-top:5%;
    }
    
    .btn-header{
      margin-top: 0%;
      margin-left: -70%;
      margin-bottom: 15%;
    }
  
    .banner{
        height: 110%;
        background-image: url(../img/triangle.svg),url(../img/nouille.svg);
        background-size: 250%;
        background-position-x: 50%;
    }
  
    .banner h1{
        line-height: 11rem;
    }
  
    .scroll-container{
      margin-top: 10%;
    }
    
    #moveDown{
      font-size: 4rem;
    }

    img.logo.img-fluid{
      width: 250%;
    }


}

/* lg devices (tablets, 992px and up)*/
@media (max-width: 992px) { 
  #circle{
    display: none;
  }
  
  .btn{
    font-size: 2rem;
    margin-top: 10%;
  }
  
  .DesktopNav{
    height: 10%;
    padding-top:5%;
  }
  
  .btn-header{
    margin-top: 0%;
    margin-left: -50%;
    margin-bottom: 15%;
  }

  .banner{
      height: 110%;
      background-image: url(../img/triangle.svg),url(../img/nouille.svg);
      background-size: 250%;
      background-position-x: 50%;
  }

  .banner h1{
      line-height: 10rem;
  }

  .scroll-container{
    margin-top: 10%;
  }
  
  #moveDown{
    font-size: 4rem;
  }

  .responsive__icone{
    font-size: 1rem;
    margin-bottom:0%;
    padding-top: 10%;
    }

    .services__boxe h3{
      margin-bottom: 3%;
    }

}


/*(ipad air)*/
@media (max-width: 820px){

.btn{
  font-size: 2rem;
  margin-top: 10%;
}

.DesktopNav{
  height: 10%;
  padding-top:5%;
}

.btn-header{
  margin-top: 0%;
  margin-left: -50%;
  margin-bottom: 15%;
}

h1{
  margin-top: 15%;
  margin-left: 5%;
}

.banner{
  height: 90%;
  background-size: 200%;
  background-position-x:80% ;
  width: 100%;
}

.banner h3{
  margin-top: 5%;
  margin-bottom: 5%;
}

.banner h1{
  margin-top: 10%;
  line-height: 8rem;
  margin-left: 0%;
}

.banner span{
  line-height: 6rem;
  margin-top: 5%;
}

.scroll-container{
  margin-top: 10%;
}

#moveDown{
  font-size: 2rem;
}

.container.competences{
  padding-left: 2%;
  padding-right: 2%;
}

.responsive__icone{
font-size: 0.8rem;
margin-bottom: 5%;
padding-top: 10%;
}

.services__boxe{
width: 80%;
margin: auto;
margin-bottom: 5%;
margin-top: 5%;
}

.contact{
margin-top: 10%;
margin-bottom: 15%;
}


.contact.btn{
  font-size: 1.5rem;

}


}


/* Medium devices (tablets, 768px and up)*/
@media (max-width: 768px) { 
  #circle{
    display: none;
  } 

  .btn-header{
    margin-top: 0%;
    margin-left: -70%;
    margin-bottom: 15%;
  }

  .banner{
      height: 100%;
      background-size: 190%;
  }

  .banner h1{
    line-height: 8rem;
}

  .banner h2{
      line-height: 5rem;
  }

  .btn{
    margin-top: 10%;
  }
}

/* Small devices (landscape phones, 576px and up)*/
@media (max-width: 576px) { 
  #circle{
    display: none;
  } 

    img.logo.img-fluid {
      width: 10%;
      margin-bottom: 5%;
  }

  .btn{
    font-size: 1rem;
    margin-top: 10%;
  }

  .btn-header{
    display: none!important;
  }

  h1{
    margin-top: 15%;
    margin-left: 5%;
  }

  .banner{
    height: 100%;
    background-size: 180%;
  }

  .banner h3{
    margin-top: 5%;
    margin-bottom: 5%;
}

  .banner h1{
    margin-top: 10%;
    line-height: 4rem;
    margin-left: 0%;
  }

  .banner span{
    line-height: 6rem;
    margin-top: 5%;
  }

  .scroll-container{
    margin-top: 15%;
  }

  #moveDown{
    font-size: 1.5rem;
  }

  .container.competences{
    padding-left: 2%;
    padding-right: 2%;
}

.responsive__icone{
  font-size: 0.8rem;
  margin-bottom: 5%;
  padding-top: 10%;
}

.services__boxe{
  width: 80%;
  margin: auto;
  margin-bottom: 5%;
  margin-top: 5%;
}

.contact{
  margin-top: 10%;
  margin-bottom: 15%;
}

}

/* (iphone4)*/
@media (max-width: 320px){ 

  .banner{
      background-size: 200%;
  }

  .banner h3{
    margin-left: 5%;
}

  .banner h1{
    line-height: 3.5rem;
  }
 
  .banner span{
    line-height: 4rem;
    margin-top: 5%;
  }

  .scroll-container{
    margin-top: 12%;
  }

  #moveDown{
    font-size: 1.5rem;
  }


.services__boxe h3{
  padding-top: 5%;
}

.contact{
  margin-top: 10%;
  margin-bottom: 15%;
}

.btn{
  margin-top: 10%;
}


}