@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

:root {
    --h1: normal 700 4rem/1.2 "Roboto Mono", monospace;   
    --h2: normal 600 2.5rem/1.3 "Roboto Mono", monospace;  
    --h3: normal 500 2rem/1.4 "Roboto Mono", monospace;   
    --h4: normal 500 1.5rem/1.4 "Roboto Mono", monospace;  
    --p: normal 400 1rem/1.6 "Roboto Mono", monospace;     
    --link: normal 500 1rem/1.6 "Roboto Mono", monospace;

    --h1-mobile: normal 700 2.6rem/1.2 "Roboto Mono", monospace;
    --h2-mobile: normal 600 1.9rem/1.25 "Roboto Mono", monospace;
    --h3-mobile: normal 500 1.6rem/1.3 "Roboto Mono", monospace;
    --h4-mobile: normal 500 1.25rem/1.3 "Roboto Mono", monospace;
    --p-mobile:  normal 400 0.95rem/1.45 "Roboto Mono", monospace;
    --link-mobile: normal 500 0.95rem/1.45 "Roboto Mono", monospace;

    --transition: all 0.3s ease-in-out;

    --yellow: #EBEB37;
    --black: #000000;
    --spuma: #FFFFFF;
    --grey: #c1c1c1;

}

body {
    position: relative;
}

body.no-scroll {
    overflow: hidden;
    height: 100vh;
}


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

}

.img-fluid {
    max-width: 100%;
    height: auto;
}

#service {
    margin-top: 120px;
    margin-bottom: 120px;
}

#service img{
    width: 80%;
}

#service h1 {
    font-size: 64px;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 600;
    line-height: 85%;
    letter-spacing: -1px;

}

#web-box {
    width: 100%;
    height: auto;
    background-color: var(--yellow);
    position: relative;
    padding: 20px;
}

#graphic-box {
    width: 100%;
    height: auto;
    background-color: var(--black);
    position: relative;
    padding: 20px;
    color: var(--spuma);
}

#social-box {
    width: 100%;
    height: auto;
    position: relative;
    padding: 20px;
}


#web-box p{
    font: var(--p);

}

#graphic-box p{
    font: var(--p);

}

#social-box p{
    font: var(--p);

}

.img-box img{
    width: 350px;
    align-items: center;
}

#fascia-web {
    position: absolute;
    top: -17%;
    left: 8%;
    width: 25%;
}

#fascia-graphic {
    position: absolute;
    top: -17%;
    left: 8%;
    width: 25%;
}

#fascia-social {
    position: absolute;
    top: -17%;
    right: 8%;
    width: 25%;
}


.btn {
  border: 2px var(--black) solid;
  padding: 7px;
  display: inline-block;
  color: var(--black);

}

.call-to h4{
    font: var(--h4);
    padding: 20px;
}

#smart-img {
    width: 350px;
}


/*---------- MEDIA ----------*/

@media (max-width: 998px) { 

#fascia-web {
    top: -10%;
    width: 45%;
}

#fascia-graphic {
    top: -10%;
    width: 45%;
}

#fascia-social {
    top: -10%;
    width: 45%;
}


}


@media (max-width: 768px) {

 #service h1 {
    font-size: 44px;
    text-align: center;
    margin: 40px 0;
 }

#web-box p{
font: var(--p-mobile);

}

#socal-box p{
font: var(--p-mobile);

}

#wgraphic-box p{
font: var(--p-mobile);

}

 #fascia-web {
    width: 50%;
    top: -15%;
}

 #fascia-social {
    width: 50%;
    top: -10%;
}

 #fascia-graphic {
    width: 50%;
    top: -8%;
}


.call-to h4{
    font: var(--h4-mobile);
}


    
}

@media (max-width: 576px) { 
    #fascia-web {
    width: 80%;
}

 #fascia-social {
    width: 80%;
    top: -10%;
}

 #fascia-graphic {
    width: 80%;
    top: -5%;
}
  
}