/* -------------------------------------------------------------------------------- */
/* ! Base */
/* -------------------------------------------------------------------------------- */

/** Reset */
*{
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
}

ul{
    list-style-type: none;
}

html, body{
    overflow-x: hidden;
}
/** Tipografia */

body{
    font-family: 'Urbanist', sans-serif;
}

h1,h2,h3,h4,h5,h6{
    font-family: 'Urbanist', sans-serif;
}

p,ul,a{
    font-size: 1.2em;
    line-height: 1.2em;
    margin-bottom: 15px;
}

p span{
    font-weight:400;
    color: var(--dark);
}



/* *Riuso */

.res{
    width: 100%;
    max-width: 400px;
}


/* *Tavolozza colori */

:root{
    --primary:#F9F7F0;
    --secondary: #A7A59E;
    --accent: #4A5F60;
    --light: #EBD5AC;
    --dark:#1E1E1E;
}


/* -------------------------------------------------------------------------------- */
/* ! Mobile first */
/* -------------------------------------------------------------------------------- */

/* Grid system */

.grid{
    display: grid;
    grid-template-columns: repeat(8,1fr);
    gap: 10px;
    padding: 20px;
}

/* ? MENU' */

.site-nav{
    background-color: none;
    grid-column: 1/9;

}


.site-nav h1{
    grid-column: 1/9;
    color: var(--dark);
    z-index: 1;
}

.sofia{
    font-size: 20px;
}

    
.site-nav__menu{
   position: absolute;
   top: 0;
   left: 0;
   max-height: 0;
   overflow: hidden;
   z-index: 1;
  
}

.site-nav__menu a{
    color: var(--primary);
}

.open .site-nav__menu{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-height: 100%;
    width: 100%;
    height: 400%;
    background: linear-gradient(186.36deg, #4A5F60 0%, #627C75 100%);
    z-index: 1;
}

.site-nav__hamburger{
    cursor: pointer;
    grid-column: 7/9;
    justify-self: end;
    z-index: 1;
    color: #F9F7F0;
}


.menu{
    display: flex;
    align-items: baseline;
    grid-column: 1/9;
    flex-direction: row;
    justify-content: space-between;
    height: fit-content;
    z-index: 3;
}

/* ? COVER */

#cover{
    position: relative; 
    background-image:  url(img/ItalianSummer68-57.png) ;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 62% 50%;
    height: 100vh;
    grid-column: 1/9;

}

#cover::before {
    content: ' ';
    width: 100%;
    height: 100%;
    background: var(--dark);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 2;
}

.hello{
    grid-column: 1/5;
    text-align: center;
    margin-bottom: 72px;
}

.site-nav h1 {
    grid-column: 3/5;
    color: #F9F7F0;
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 0.345em;
    margin: auto 0;
    line-height: 30px;
    
}

.hello h1{
    grid-column: 3/5;
    color: #F9F7F0;
    font-weight: 400;
    font-size: 45px;
    letter-spacing: 0.345em;
    margin: auto 0;
    line-height: 70px;
}

#cover h2 {
    margin: auto 0;
 
    text-align: center;
    color: #EBD5AC;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 22px;
}

#cover h3 {
    grid-column: 2/4;
    text-align: center;
    color: #A7A59E;
    font-weight: 400;
    font-size: 17px;
    letter-spacing: 0.345em;
    margin: auto 0;
    margin-bottom: 5px;
}

#cover h3 h1{
    display: block;
}
/* ? MI PRESENTO */
.mipresento{
    grid-column: 1/9;
}
.mipresento h2{
    grid-column: 1/9;
    padding-top: 75px;
    padding-bottom: 19px;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    letter-spacing: 0.245em;
}

.mipresento p{
    grid-column: 1/9;
    color: #A7A59E;
    font-weight: 400;
    font-size: 19px;
    line-height: 24px;
    letter-spacing: 0.28em;
}

/* ? ISTRUZIONE */
.istruzione{
    grid-column: 1/9;
}
.istruzione h2{
    grid-column: 1/9;
    padding-top: 20px;
    padding-bottom: 19px;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    letter-spacing: 0.245em;
}

.istruzione p{
    grid-column: 1/9;
    color: #A7A59E;
    font-weight: 400;
    font-size: 19px;
    line-height: 24px;
    letter-spacing: 0.28em;
    margin-bottom: 80px;
}


/* ? AREE DI COMPETENZA */

.aree h2{
    grid-column: 1/9;
    color: #F9F7F0;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    letter-spacing: 0.245em;
    margin-top: 20px;
}

.aree{
    background-color: #1E1E1E;
    display: grid;
    grid-column: 1/9;
    padding-bottom: 72px;
    padding-top: 72px;
    border-radius: 38px;
}

.brand{
    grid-column: 1/9;
}

.brand h3{
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px; 
    text-align: center;
    letter-spacing: 0.245em; 
    color: #F9F7F0;
}
.brand__box{
    margin-top: 40px;
    background-color: #4a5f60;
   
    border-radius: 62px;
    padding: 300px 200px 50px 50px;
 
}

.design{
    grid-column: 1/9;
}

.design h3{
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px; 
    text-align: center;
    letter-spacing: 0.245em; 
    color: #F9F7F0;
}
.design__box{
    background-color: #4a5f60;
    margin-top: 40px;
   
    border-radius: 62px;
    padding: 300px 200px 50px 50px;
}

.cta{
    grid-column: 1/9;
    text-align: center; 
}

.cta__button{
    grid-column: 1/9;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 30px;
    border: 1px solid #fff;
    border-radius: 62px;
    padding: 9px 41px;
}


.cta a{
    font-weight: 700;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
    letter-spacing: 0.245em;
    color: #F9F7F0;
}



/* ? ESPERIENZE */

.esprerienze{
    grid-column: 1/9;
}

.esprerienze h2{
    grid-column: 1/9;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    letter-spacing: 0.245em;
    margin-top: 80px;
}

.esprerienze p{
    grid-column: 1/9;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0.345em;
    color: #A7A59E;
    margin-top: 40px;
}

/*? LINGUE */

.lingue{
    margin-top: 53px;
    grid-column: 1/9;
}
.lingue h2{
    grid-column: 2/8;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    letter-spacing: 0.245em;
}


.italiano__box{
    grid-column: 2/8;
    border: 1px solid #000000;
    border-radius: 29px;
    margin-top: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.inglese__box{
    grid-column: 2/8;
    border: 1px solid #000000;
    border-radius: 29px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.italiano__box h3 {
    text-align: center;
}
.italiano__box p {
    text-align: center;
    margin: auto 0
}

.inglese__box h3{
    text-align: center;
}

.inglese__box p{
    text-align: center;
    margin: auto 0
}

/* ?TORNA SU */
.bottone{
    grid-column: 1/9;
}
.btt{
    grid-column: 1/9;
    text-align: center;
}
.btt__container{
   grid-column: 1/9 ;
   margin: 0 auto;
   margin-top: 40px;
}

.button__tornasu p{
    text-align: center;
    color: #4A5F60;
    font-weight: 700;
    margin-top: 0px;
    font-size: 17px;
    font-family: 'Urbanist', sans-serif;
}
/* ?FOOTER */

.footer{
    clip-path: url(img/Rectangle\ 9footer.svg);
    background: var(--accent);
    grid-column: 1/9;
    color: #F9F7F0;
    font-weight: 400;
    margin-top:30px;
    display: grid;
    border-radius: 10px 10px 0px 0px;
}

.contatti h3{
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    letter-spacing: 0.245em;
}
.contatti{
    margin-top: 55px;
    grid-column: 1/9;
    text-align: center;
    line-height: 29px;
    text-align: center;
    letter-spacing: 0.245em;
}

.mail{
    font-weight: 400;
    grid-column: 1/9;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    letter-spacing: 0.14em;
    margin-top: 15px;
}

.social{
    margin-top: 30px;
    grid-column: 1/9;
    text-align: center;
    color: #F9F7F0;
}

.social h3{
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    letter-spacing: 0.245em;
}

.instagram{
    margin-top: 15px;
}
.igprofile{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: #F9F7F0;
}

.igname{
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    letter-spacing: 0.14em;
    margin-top: 15px;
    margin-left: 8px;
    color: #F9F7F0;
}

.igname p{
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    letter-spacing: 0.14em;
    margin-left: 8px;
    color: #F9F7F0;
}




/* -------------------------------------------------------------------------------- */
/* ! Medium Media Query */
/* -------------------------------------------------------------------------------- */

@media (min-width: 767px){
    
    .hello{
        grid-column: 2/5;
    }

    .hello h1 {
        font-size: 70px;
    }

    #cover h2 {
        font-size: 17px;
        margin-top: 15px;
    }

    #cover h3 {
        font-size: 17px;
        margin-bottom: 10px;
    }

    .aree{
        grid-column: 1/9;
    }

    .brand{
        grid-column:2/5;
        height: 400px;
    }

    .design{
        grid-column: 5/8;
    }

    .cta{
        grid-column: 4/6;
    }

    .cta__button{
        padding-left: 10px;
        padding-right: 10px;
    }
    .cta a{
        font-size: 14px;
    }

    .lingue {
        margin-top: 20px;
    }

    .italiano__box {
        grid-column: 3/5;
    }

    .inglese__box {
        grid-column: 5/7;
        margin-top: 20px;
    }
}



/* -------------------------------------------------------------------------------- */
/* ! big Media Query */
/* -------------------------------------------------------------------------------- */

@media (min-width: 992px){
    
    .hello{
        grid-column: 2/5;
    }

    .hello h1 {
        font-size:120px;
    }

    #cover h2 {
        font-size: 17px;
        margin-top: 45px;
    }

    #cover h3 {
        font-size: 17px;
        margin-bottom: 32px;
    }

    .mipresento h2{
        font-size: 28px;
    }

    .mipresento p{
        font-size: 22px;
    }

    .istruzione{
            margin-right: 60px;
    margin-left: 60px;
    }
    .istruzione h2{
        font-size: 28px;
    }
    .istruzione p{
        font-size: 22px;
        line-height: 30px;
    }

    .aree h2{
        font-size: 28px;
    }
    .aree{
        grid-column: 1/9;
        display: grid;
    }

    .esprerienze h2{
        font-size: 28px;
    }
    .brand__box{
        grid-column: 3/4;
        
    }

    .design__box{
        grid-column: 5/7;
        display: flex;
        
    }

    .cta{
        grid-column: 4/6;
    }

    .cta__button{
        padding-left: 10px;
        padding-right: 10px;
    }
    .cta a{
        font-size: 13px;
    }

    .esprerienze {
        margin-right: 60px;
        margin-left: 60px;
    }
    .esprerienze p{
        font-size: 22px;
        line-height: 30px;
    }

    .lingue {
        margin-top: 20px;
    }

    .lingue h2{
        font-size: 28px;
    }

    .italiano__box {
        grid-column: 3/5;
    }

    .italiano__box h3{
        font-size: 25px;
        line-height: 30px;
    }

    .inglese__box h3{
        font-size: 25px;
        line-height: 30px;
    }

    .inglese__box {
        grid-column: 5/7;
        margin-top: 20px;
    }

    .button__tornasu p{
        font-size: 15px;
    }
    .footer{
        margin-top: 30px;
    }
    .contatti{
        grid-column: 1/5;
    }

    .social{
        grid-column: 5/9;
    }
}





/* -------------------------------------------------------------------------------- */
/* *UX/UI DESIGN*/
/* -------------------------------------------------------------------------------- */

/* ? COVER */

#coverdesign{
    position: relative; 
    background-image:  url(img/amelie-mourichon-sv8oOQaUb-o-unsplash.jpg) ;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 62% 50%;
    height: 100vh;
    grid-column: 1/9;

}

#coverdesign::before {
    content: ' ';
    width: 100%;
    height: 100%;
    background: var(--dark);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
    z-index: 1;
}

.hellodesign{
    grid-column: 2/8;
    text-align: center;
    color: var(--dark);
    font-weight: 700;
    font-size: 25px;
    letter-spacing: 0.345em;
    margin: auto 0;
    line-height: 70px;  
}

.hellodesign{
    margin: 0 auto;
    z-index: 2;
}

.hellodesign h1{
    font-size: 50px;
    color: var(--primary);
}


/* ? TECNOLOGIE */

.tecnologie{
    grid-column: 1/9;
}
.tecnologie h2{
    margin-top: 30px;
    margin-bottom: 20px;
    grid-column: 1/9;
    text-align: center;
    color: var(--dark);
    margin-top: 30px;
    text-align: center;
    padding: 12px;
    padding-top: 10px;
    padding-bottom: 19px;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    letter-spacing: 0.245em;
}

.tecnologie h3{
    margin-top: 10px;
    text-align: center;
    color: var(--dark);
    padding-bottom: 19px;
    font-weight: 400;
    font-size: 20px;
    line-height: 29px;
    letter-spacing: 0.245em;
}

.tecnologie   img{
    height: 80px;
}

.tecnologie  li{
    grid-column: span 4;
    text-align: center;
    padding: 12px;
   
}

/* ? PROGETTI */


.progetti{
    display: grid;
    grid-column: 1/9;
    background-color: #fff;
   
}

.progetti h2{
    margin-top: 30px;
    margin-bottom: 20px;
    grid-column: 1/9;
    text-align: center;
    color: var(--dark);
    margin-top: 30px;
    text-align: center;
    padding: 12px;
    padding-top: 10px;
    padding-bottom: 19px;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    letter-spacing: 0.245em;
}



/* MUSICMATCH */
.musicmatch{
    grid-column: 1/9;
}
.musicmatch h3{
    color: var(--secondary);
    grid-column: 1/9;
    text-align: center;
    margin-bottom: 53px;
    font-size: 7vw;
    line-height: 29px;
    letter-spacing: 0.245em;
}

.musicmatch p{
    color: var(--dark );
    text-align: center;
    grid-column: 1/9;
    letter-spacing: 0.36em;
    line-height: 24px;
    font-size: 19px;
}

.musicmatch h4{
    color: var(--dark);
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 23px;
    display: grid;
    grid-column: 1/9;
    line-height: 29px;
    letter-spacing: 0.245em;
}

.processo{
    border: solid 2px var(--accent);
    border-radius: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    grid-column: 2/8;
    padding: 10px;
}
.musicmatch__container1{
    grid-column: 1/9;
    display: grid;
    width: 100%;
    margin-top: 50px;
}

.musicmatch__container2{
    grid-column: 1/9;
    text-align: center;
    width: 100%;
    margin-top: 50px;
}

.musicmatchimg1{
    grid-column: 5/6;
}

.musicmatchimg2{
    grid-column: 1/9;
    width: 120%;
}


.musicmatch__container h4{
    margin-bottom: 40px;
    grid-column: 2/8;
}

.musicmatch__btt{
    border: solid var(--accent);
    border-radius: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    grid-column: 2/8;
    text-align: center;
    background-color: #4a5f60;
    margin-top: 25px;
    padding: 5px;
}

.musicmatch__btt a{
    font-family: 'Urbanist', sans-serif;
    color: #F9F7F0;
    font-size: 20px;
}

/* MEMOFONTE */

.memofonte{
    grid-column: 1/9;
    display: grid;
    
}
.memofonte h3{
    color: var(--secondary);
    grid-column: 1/9;
    text-align: center;
    margin-bottom: 53px;
    font-size: 7vw;
    line-height: 29px;
    letter-spacing: 0.245em;
    margin-top: 120px;
}

.memofonte p{
    color: var(--dark);
    text-align: center;
    grid-column: 1/9;
    letter-spacing: 0.36em;
    line-height: 24px;
}

.memofonte h4{
    color: var(--dark);
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 23px;
    display: grid;
    grid-column: 1/9;
    line-height: 29px;
    letter-spacing: 0.245em;
}



.memofonte__container{
    grid-column: 1/9;
    width: 100%;
    margin-top: 50px;
    text-align: center;

}

.memmockup__desktop{
    grid-column: 1/9;
    text-align: center;
}

.memmockup__tablet{
    grid-column: 1/9;
    text-align: center;
}

.memmockup__mobile{
    grid-column: 1/9;
    text-align: center;
}

.memofonteimg1{
    width: 70%;
}

.memofonteimg2{
    width: 70%;
}

.memofonteimg3{
    width: 70%;
}

.memofonte__container h5{
    text-align: center;
    font-size: 16px;
    grid-column: 5/5;
    margin-bottom: 80px;
    color: var(--accent);

}

.memofonteimg4{
    grid-column: 1/9;
    width: 100%;
    text-align: center;
}

.memofonteimg5{
    grid-column: 1/9;
    width: 100%;
    text-align: center;
}

.memofonteimg6{
    grid-column: 1/9;
    width: 100%;
    text-align: center;
}


.memofonte__container h4{
    margin-bottom: 40px;
    grid-column: 1/9;
}

.memofonte__btt{
    border: solid var(--accent);
    border-radius: 10px;
    padding-top: 5px;
    grid-column: 2/8;
    padding-bottom: 5px;
    text-align: center;
    background-color: #4a5f60;
    margin-top: 25px;
    padding: 5px;
}

.memofonte__btt a{
    font-family: 'Urbanist', sans-serif;
    color: #F9F7F0;
    font-size: 20px;
}



/* -------------------------------------------------------------------------------- */
/* ! Medium Media Query */
/* -------------------------------------------------------------------------------- */

@media (min-width: 767px){
    .musicmatchimg{
        text-align: center;
        grid-column: 5/6;
    }
    .musicmatch p{
        grid-column: 1/9;
    }
    .musicmatch__btt{
        grid-column: 4/6;
    }

    .musicmatchimg2{
        grid-column: 1/9;
        width: 120%;
        text-align: center;
    }
    .concept__btt{
        grid-column: 4/6;
        text-align: center;
    }

    .memofonte p{
        grid-column: 1/9;
    }

    .tecnologie h2{
        margin-top: 30px;
        text-align: center;
        padding: 12px;
        padding-top: 75px;
        padding-bottom: 19px;
        font-weight: 400;
        font-size: 24px;
        line-height: 29px;
        letter-spacing: 0.245em;
    }

    .progetti h2{
        margin-top: 30px;
        text-align: center;
        padding: 12px;
        padding-top: 75px;
        padding-bottom: 19px;
        font-weight: 400;
        font-size: 24px;
        line-height: 29px;
        letter-spacing: 0.245em;
    }

    .memofonte__container{
        color: var(--dark);
        text-align: center;
        margin-top: 30px;
        font-size: 23px;
        grid-column: 1/9;
        line-height: 29px;
        letter-spacing: 0.245em;
    }

    .memofonte h3{
        margin-top: 200px;
    }

    .memofonte h4{
        margin-top: 120px;
    }
    .memofonteimg {
        grid-column: 5/6;
        text-align: center;
    }

    .memofonte__btt{
       grid-column: 4/6;
    }

    .memofonteimg1{
        width: 40%;
    }
    
    .memofonteimg2{
        width: 40%;
    }
    
    .memofonteimg3{
        width: 40%;
    }
    
}



/* -------------------------------------------------------------------------------- */
/* ! Big Media Query */
/* -------------------------------------------------------------------------------- */
@media (min-width: 992px){
    
    .hellodesign h1 {
        font-size: 70px;
    }

    .mipresento{
        margin-right: 60px;
        margin-left: 60px;
    }
    .tecnologie h2{
        font-size: 28px;
    }

    .tecnologie li {
        grid-column: span 2;
    }

    .progetti{
        margin-right: 60px;
        margin-left: 60px;
    }
    .preogetti h2{
        font-size: 28px;
    }

    .musicmatch p{
        font-size: 22px;
        margin-right: 100px;
        margin-left: 100px;
    }

    .musicmatch h3{
        margin-top: 60px;
        margin-bottom: 100px;
    }

    .musicmatch h4 {
        font-size: 26px;
        margin-bottom: 40px;
        margin-top: 70px;
    }

    .musicmatch__container1{
        grid-column: 1/4;
    }
    .musicmatch__container2{
        grid-column: 4/9;
        margin-top: 250px;
    }

    .musicmatchimg2{
        width: 110%;
    }

    .musicmatch__btt{
        margin-top: 100px;
        grid-column: 4/6;
        
    }
    .res{
        max-width: none;
    }
    
    .memofonte h3{
        margin-top: 240px;
        margin-bottom: 100px;
    }

    .memofonte p{
        font-size: 22px;
    margin-right: 100px;
    margin-left: 100px;
    }

    .memofonte__container{
        display: grid;
    }
    .memmockup__desktop{
        grid-column: 1/3;
        width: 140%;
        text-align: left;
    }
    

    .memofonte h4{
        font-size: 26px;
        margin-bottom: 100px;
    }
    .memmockup__tablet{
        grid-column: 3/5 ;
        width: 120%;
        text-align: left;
    }
    .memmockup__mobile{
        grid-column: 5/5 ;
        width: 140%;
        text-align: left;
    }

    .memofonte__container h5{
        text-align: left;
    }

    .memofonteimg4{
        grid-column: 1/9;
    }

    .memofonteimg5{
        grid-column: 1/4;
        width: 150%;
    }
    .memofonteimg6{
        grid-column: 4/9;
    }
}






/* -------------------------------------------------------------------------------- */
/* *CONCEPT DESIGN*/
/* -------------------------------------------------------------------------------- */

    /* ? COVER */

    #coverconcept{
        position: relative; 
        background-image:  url(img/med-badr-chemmaoui-ZSPBhokqDMc-unsplash.jpg) ;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 62% 50%;
        height: 100vh;
        grid-column: 1/9;

    }

    #coverconcept::before {
        content: ' ';
        width: 100%;
        height: 100%;
        background: var(--dark);
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 1;
    }

    .helloconcept{
        grid-column: 1/9;
        text-align: center;
        color: var(--primary);
        font-weight: 700;
        font-size: 25px;
        letter-spacing: 0.345em;
        line-height: 70px;
    }

    .helloconcept h1{
        font-size: 50px;
    }
    .concept__btt{
        grid-column: 1/9;
        text-align: center;
        color: var(--primary);
        background-color: var(--accent);
        border-radius: 10px;
        padding: 5px;
        margin-top: 60px;
    }

    .concept__btt a{
        color: var(--primary);
    }

    
/* -------------------------------------------------------------------------------- */
/* ! Medium Media Query */
/* -------------------------------------------------------------------------------- */

@media (min-width: 767px){
    .concept__btt{
        grid-column: 4/6;
    }

}

/* -------------------------------------------------------------------------------- */
/* ! Big Media Query */
/* -------------------------------------------------------------------------------- */

@media (min-width: 992px){

    .memofonteimg5{
        margin-top: 50px;
    }

    .memofonteimg6{
        margin-top: 50px;
    }
    .concept__btt{
        grid-column: 4/6;
        margin-left: 10px;
        margin-right: 10px;
    }





    
}

    

.bookends-dots {
    position: relative;
    border-bottom: 1px solid var(--accent);
    width: 900%;
}

.bookends-dots:before,
.bookends-dots:after {
position: absolute;
bottom: -5px;
width: 10px;
height: 10px;
display: block;
border-width: 0 1px 1px 0;
border-color: hsla(0, 0%, 50%, 0.75);
border-style: solid;
box-sizing: border-box;
border-radius: 100%;
}

.bookends-dots:before {
transform: translateZ(0) rotate(-45deg);
left: -10px;
}

.bookends-dots:after {
transform: translateZ(0) rotate(135deg);
right: -10px;
}