body{
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility;
    text-decoration: none;
}
/* FONTS
font-family: 'Audiowide', cursive;
font-family: 'Roboto', sans-serif; 
*/
html { scroll-behavior: smooth; }
*{ box-sizing: border-box; }
a{ text-decoration: none; }
:root{
    --color2:#f78e71;
    --color3:#c76e56;
    --font1: 'Audiowide', cursive;
    --font2: 'Roboto', sans-serif;
    --grey1: rgb(37, 37, 37);
    --grey2: #1d1d1d;
    --grey3: rgb(14, 14, 14);
}
header{ padding: 0px 50px; height: 35px; width: 100%; background-color: rgb(51, 51, 51); }
.mini-info a{ color: rgb(167, 167, 167); }
.orange-dt{ color: var(--color2); margin-right: 5px; }
.social-icons a{ margin-left: 5px; font-size: 16pt; color: var(--color2); }
.particles-bg{ position: absolute; top: 35px; z-index: 3; width: 100%; height: 730px; }
.home-bg{ position: relative; z-index: 1; width: 100%; height: 730px; background: url(./assets/bg-city.jpg); }
.home-container{ width: 100%; height: 730px; position: absolute; z-index: 1; top:35px; }
.home-img{ width: 60%; }
.home-text h1{ font-size: 45pt; font-family: var(--font1); color: rgb(255, 245, 245); }
.home-text h3{ font-family: var(--font1); color: var(--color2); font-size: 19pt; margin-top: -10px; }
.home-text p{ text-shadow: 2px 3px 8px black; text-align: center; margin-top: 10px; padding: 20px; font-weight: 500; font-size: 16pt; border-radius: 40px; width: 70%; color: white }
.section1{ width: 90%; margin-top: 190px }
nav{ position: absolute; top: 35px; z-index: 5; padding-left: 50px; width:100%; font-weight: 400; font-family: var(--font2); height: 50px; display: flex; justify-content: space-between; align-items: center; }
.home-buttons{ width: 100%; top: 480px; margin: auto; position: absolute; z-index: 7; }
.nav-links button{ background-color: transparent; border: none; text-transform: capitalize; color: whitesmoke; font-size: 14pt; font-weight: 400; }
.orcamento-btn{ margin: 10px 20px; border-radius: 5px; font-weight: 400; padding: 5px 20px; text-decoration: none; color: rgb(31, 31, 31); font-size: 16pt; background-color: rgba(235, 235, 235, 0.747); font-family: var(--font2)}
.orcamento-btn:hover{ color: rgb(41, 41, 41); background: #ee8568; transition-duration: 0.5s;}
.portfolio-btn{ border: none; margin: 10px 20px; border-radius: 5px; font-weight: 400; padding: 5px 20px; text-decoration: none; color: white; font-size: 16pt; background: linear-gradient(to right,black ,rgb(30, 30, 31)); font-family: var(--font2);}
.portfolio-btn:hover{ color: rgb(211, 211, 211); background: var(--grey1); transition-duration: 0.4s; }
.media-icons{ height: 100%; }
.email-icon{ display: flex; align-items: center; justify-content: center; background-color: rgba(235, 235, 235, 0.747) ; height: 100%; border-radius: 5px 0px 0px 5px; width: 70px; text-decoration: none; color: rgb(30, 30, 31); font-size: 17pt; }
.email-icon:hover{ background-color: var(--color2); color: white; transition-duration: 0.3s; }
.sc-header-shape{ position: relative; left: -270px; top: -100px; z-index: 8; width: 60%; height: 90px; }
.about{ width: 100%; height: max-content; background: var(--grey2); }
.line{ padding-left: 90px; display: flex; justify-content: flex-start; align-items: center; width: 90%; background: var(--grey2); height: 100px; }
.about-text h4{ margin-bottom: 30px; font-family: var(--font1); color: whitesmoke; border-left:  5px solid var(--color2); padding-left: 10px; }
#triangle { width: 0; height: 0; border-bottom: 100px solid var(--grey2); border-right: 100px solid transparent; }
.section2{ width: 85%; margin-top: -90px; }
.about-img{ margin-top: 40px; width: 45%; }
.about-text { padding: 20px; color: whitesmoke; width: 50%; }
.logo-dt{ color: var(--color2); font-weight: 600 }
/* Section Services */
.services { width: 100%; height: max-content; padding: 50px 60px; background-color: rgb(235, 237, 240); }
.services h2 { color: var(--grey2); }
.services hr { width: 30%; height: 3px; color: rgb(0, 0, 0); margin-bottom: 30px; }
.service-card { margin: 10px 30px; }
.service-card img { width: 60px; height: 60px; margin-bottom: 20px; }
.gradient-border { width: 100%; height: 5px; background: linear-gradient(to right, var(--color2) ,rgb(240, 26, 72));  }
.responsive-portfolio { width: 80%; }
.portfolio { padding: 30px 0; background-color: #1d1d1d; }
.responsive-portfolio img { margin: 20px; }
.portfolio h2 { color: rgb(235, 237, 240); }
.portfolio hr { width: 30%; height: 3px; color: rgb(235, 235, 235); margin-bottom: 30px; }
footer{ padding: 40px 0; height: max-content; width: 100%; background-color: #242424; }
footer h4 { color:rgb(214, 214, 214) }
h3.logo { font-size: 16pt; text-transform: uppercase; font-family: var(--font1); color: rgb(214, 214, 214);  }
.foot-logo,.contact-info,.footer-media { margin: 20px 50px; }
.foot-logo p { color: rgb(214, 214, 214); }
footer a { color: rgb(214, 214, 214); }
footer a:hover { color:#c76e56; }
.copy { margin-top: -15px; }

@media (min-width: 320px) and (max-width: 760px) {
    header { height:50px; padding: 0 20px;}
    .particles-bg { top:50px;}
    .location { display: none;}
    .nav-links { display: none; }
    .about-text {width: 100%; }
    .section1 { margin-top: 100px ; }
    .home-text { width: 100%; }
    .home-text h1 { font-size: 24pt;}
    .home-text h3 { text-align: center; width:70%; margin-top: 10px; }
    .home-text p { width: 100%; text-align: center;}
    .home-buttons { flex-direction: column; }
    .portfolio-btn { display: none; }
    nav { padding-left: 0px; top:50px; justify-content: flex-end; }
    footer { text-align: center;}
    .service-card h4 { text-align: center;}
    .about-text p { text-align: justify;}
    .about-text h4 { text-align: center;}
}

@media (max-width: 800px) {}