/* Start Variables */
:root {
    --main-color: #10cab7;
    --secondary-color: #2c4755;
    --section-padding: 60px;
    --section-background: #f6f6f6;
    --main-duration: 0.3s;
}

/* End Variables */


/* ------------------------------------------------------------- */

/* START GLOBAL RULES  */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* le template est conçu avec le font Work Sans  */
body {
    font-family: "Work Sans", sans-serif;
}

/* 
    on utilise un container pour garder le contenu de la page au milieu , quand on dézoom le contenu reste au 
        milieu si on faisais pas ça on aura le logo tout à gauche et des informations tout à droite 
        donc le parent nous permet de mettre un background et le container les informations qui vont suivre
        la même ligne verticalement
*/

.container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

/* to have the responsive design  */
/* in mobile our container dont have a width , it takes full screen */
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

/* END GLOBAL RULES  */

/* ------------------------------------------------------------ */


/* 
    font icons => de base une photo si on la redimensionne y'aura un problème de pixel , donc on utilise les font
    icons qui nous permettent de manipuler les photos comme si c'était des font (modifier la couleur, dimension..)
    visiter le site fontawesome.com => download font awesome 
    on met le dossier webfonts au même niveau que le dossier css pour que les icones marchent
    on aura besoin aussi du file all.min.css(minified all.css, la taille du code est réduite) qui va appeler les 
    web fonts , on le met avec le file css car il fait (../webfonts/..) pour récupérer un font

*/


/* --------------------------------------------------------- */

/* Start Components */
.special-heading {
    color: #ebeced;
    font-size: 100px;
    text-align: center;
    font-weight: 800;
    letter-spacing: -3px;
    margin: 0;
}

.special-heading+p {
    margin: -30px 0 0;
    font-size: 20px;
    text-align: center;
    color: #797979;
}

@media (max-width: 767px) {
    .special-heading {
        font-size: 60px;
    }

    .special-heading+p {
        margin-top: -20px;
    }
}

/* End Components */

/* Start Header */
.header {
    padding: 20px;
}

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

.header .logo {
    width: 60px;
}

.header .links {
    position: relative;
}

.header .links .icon {
    width: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.header .links .icon span {
    background-color: #333;
    margin-bottom: 5px;
    height: 2px;
}

.header .links .icon span:first-child {
    width: 100%;
}

.header .links .icon span:nth-child(2) {
    width: 60%;
    transition: var(--main-duration);
}

.header .links .icon span:last-child {
    width: 100%;
}

/* quand on met le curseur sur les links on change le width du child 2 à 100%  */
.header .links:hover span:nth-child(2) {
    width: 100%;
}

.header .links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: var(--section-backround);
    min-width: 200px;
    position: absolute;
    right: 0;
    top: calc(100% + 20px);
    display: none;
    /* pour qu'on la voit au dessus du landing section  */
    z-index: 1;
}

.header .links ul::before {
    content: "";
    position: absolute;
    border: 10px solid;
    border-color: transparent transparent #f6f6f6 transparent;
    /* 5px=>car l'icone du haut est à 30px , et la flèche est à 20x20 dans chaque bordure 10px */
    right: 5px;
    top: -20px;
}

.header .links:hover ul {
    display: block;
}


.header .links ul li a {
    display: block;
    padding: 15px;
    color: #333;
    text-decoration: none;
    transition: var(--main-duration);
}

.header .links ul li a:hover {
    padding-left: 25px;
}

.header .links ul li:not(:last-child) a {
    border-bottom: 1px solid #DDD;
}

/* End Header */


/* Start Landing Section */
.landing {
    background-image: url(../images/landing.jpg);
    background-size: cover;
    /* 100vh va remplir toute la page et on enlève 64px le height du header  */
    height: calc(100vh - 64px);
    position: relative;
}


.landing .intro-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 320px;
    max-width: 100%;
}

.landing .intro-text h1 {
    margin: 0;
    color: var(--main-color);
    font-size: 50px;
    font-weight: bold;
}

.landing .intro-text p {
    line-height: 1.8;
}

/* End Landing Section  */

/* Start Features */
.features {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    background-color: var(--section-background);
}

.features .container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px;
}

.features .feat {
    padding: 20px;
    text-align: center;
}

.features .feat i {
    color: var(--main-color);
}

.features .feat h3 {
    font-weight: 800;
    margin: 30px 0;
}

.features .feat p {
    margin: 17px 0;
    line-height: 1.8;
    color: #777;
    font-size: 17px;
}

/* End Features */

/* Start Services */
.services {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

.services .services-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 30px;
    margin-top: 100px;
}

.services .services-content .srv {
    display: flex;
    margin-bottom: 40px;
}

@media (max-width:767px) {
    .services .services-content .srv {
        flex-direction: column;
        text-align: center;
    }
}

.services .services-content .srv i {
    color: var(--main-color);
    flex-basis: 60px;
}

.services .services-content .srv .text {
    flex: 1;
}

.services .services-content .srv .text h3 {
    margin: 0 0 20px;
}

.services .services-content .srv .text p {
    color: #444;
    line-height: 1.6;
    font-weight: 300;
}

.services .services-content .image {
    text-align: center;
    position: relative;
}

.services .services-content .image::before {
    content: "";
    position: absolute;
    width: 100px;
    height: calc(100% + 100px);
    background-color: var(--secondary-color);
    right: -20px;
    top: -50px;
    z-index: -1;
}

.services .services-content .image img {
    width: 260px;
}

@media (max-width:1199px) {
    .services .services-content .image-column {
        display: none;
    }
}

/* End Services */

/* Start Portfolio */
.portfolio {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    background-color: var(--section-background);
}

.portfolio .portfolio-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 30px;
    margin-top: 80px;
}

.portfolio .portfolio-content .card {
    background-color: white;
}

.portfolio .portfolio-content .card img {
    max-width: 100%;
}

.portfolio .portfolio-content .card .info {
    padding: 20px;
}

.portfolio .portfolio-content .card h3 {
    margin: 0;
}

.portfolio .portfolio-content .card p {
    color: #777;
    line-height: 1.6;
    margin-bottom: 0;
}

/* End Portfolio */

/* Start About */
.about {
    padding-top: var(--section-padding);
    padding-bottom: calc(var(--section-padding) + 60px);
}

.about .about-content {
    margin-top: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.about .about-content .image {
    position: relative;
    width: 250px;
    height: 375px;
}

.about .about-content .image img {
    max-width: 100%;
}

.about .about-content .image::before {
    content: "";
    position: absolute;
    height: calc(100% + 80px);
    width: 100px;
    top: -40px;
    left: -20px;
    background-color: #ebeced;
    z-index: -1;
}

.about .about-content .image::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 300px;
    border-left: 80px solid var(--main-color);
    border-bottom: 75px solid var(--main-color);
    z-index: -1;
    right: -150px;
    top: -40px;
}

.about .about-content .text {
    flex-basis: calc(100% - 500px);
}

.about .about-content .text p:first-of-type {
    font-weight: bold;
    line-height: 2;
    margin-bottom: 50px;
}

.about .about-content .text hr {
    width: 50%;
    display: inline-block;
    border-color: var(--main-color);
}

.about .about-content .text p:last-of-type {
    line-height: 2;
    color: #777;
}

@media (max-width:991px) {
    .about .about-content {
        flex-direction: column;
        text-align: center;
    }

    .about .about-content .image::before,
    .about .about-content .image::after {
        display: none;
    }

    .about .about-content .image {
        margin: 0 auto 60px;
    }
}

/* End About */

/* Start Contact */
.contact {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    background-color: var(--section-background);
}

.contact .info {
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
    text-align: center;
}

.contact .info .label {
    font-size: 35px;
    font-weight: 800;
    color: var(--secondary-color);
    letter-spacing: -2px;
    margin-bottom: 15px;
}

.contact .info .link {
    display: block;
    font-size: 35px;
    font-weight: bold;
    color: var(--main-color);
    text-decoration: none;
}

.contact .info .social {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    font-size: 16px;
}

.contact .info .social i {
    margin-left: 5px;
    color: var(--secondary-color);
}

@media (max-width:767px) {

    .contact .info .label,
    .contact .info .link {
        font-size: 25px;
    }
}

/* End Contact */

/* Start Footer */

.footer {
    background-color: var(--secondary-color);
    text-align: center;
    color: white;
    padding: 30px 10px;
    font-size: 18px;
}

.footer span {
    font-weight: bold;
    color: var(--main-color);
}

/* End Footer */

html {
    scroll-behavior: smooth;
}