@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600;700&display=swap');

* {
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family: 'Poppins', sans-serif;
    scroll-behavior:smooth;
}
.container {
    max-width:1180px;
    margin:auto;
}
.bar {
    height:10px;
    width:50px;
    background-color:#133272;
}


.line--header {
    width:100%;
    height:5px;
    background-color:#133272;
}


.header--area {
    display:flex;
    padding:30px;
    justify-content:space-between;
}

.logo--area {
    width:180px;
    height:180px;
}
.logo--area img {
    width:100%;
    height:auto;
}

.menu--area {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:flex-end;
}
.wpp--area {
    display:flex;
    align-items: center;
}
.wpp--logo {
    width:30px;
    height:30px;
}
.wpp--logo img {
    width:100%;
    height:auto;
}
.wpp--num a {
    text-decoration:none;
    color:#133272;
    font-size:30px;
    margin-left:5px;
}

.menuMobile {
    display:none;
    width:40px;
    height:40px;
}
.mm--line {
    height:3px;
    background-color:#133272;
}
.menu ul,
.menu li {
    list-style:none;
}
.menu ul {
    display:flex;
}

.menu li a {
    text-transform:uppercase;
    text-decoration:none;
    font-size:20px;
    color:#133272;
    font-weight:bold;
    display:flex;
    align-items:center;
    margin-left:25px;
    position:relative;
}
.menu li a::after {
    content: "";
    position:absolute;
    bottom:0;
    left:50%;
    width:0%;
    height:3px;
    background:#133272;
    transition:0.3s ease-out;
}
.menu li a:hover::after {
    left:0%;
    width:100%;
}

.banner--principal {
    background-image:url(images/studio1.jpg);
    height:calc(100vh - 245px);
    background-size:cover;
}
.shadow--banner {
    height:100%;
    width:100%;
    background-color:rgba(0, 0, 0, 0.616);
}


.area1 {
    display:grid;
    grid-template-columns:repeat(2, 1fr)
}
.area1--content {
    padding:80px;
}
.area1--content h2{
    font-size:30px;
    margin-top:15px;
}
.area1--content .area1--text {
    font-size:18px;
    font-weight:400;
    margin-top:15px;
    color:#999999;
}
.area1--img1 {
    background-image: url(images/novas/Toro.jpg);
    height:350px;
    background-position:30%;
    background-size:cover;
}
.area1--img2 {
    grid-column:2 / 3;
    grid-row: 1 / 3;
    background-image:url(images/Studio/Corolla.jpg);
    background-size:cover;
    background-position:bottom;
}


.photos--studio {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:50px;
}
.studioImageArea img {
    max-width: 100%;
    height: 800px;
    border-radius: 5px;
    border:5px solid #0d2350;
    margin-bottom:10px;
}

.area--company {
    background-color:#133272;
    color:#FFF;
    padding:30px;
}
.area--company h1 {
    text-align:center;
    font-size:35px;
    margin-top:10px;
    margin-bottom:10px;
}

.company--content {
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:50px;
}
.company {
    text-align:center;
    border-right:1px solid rgba(255, 255, 255, 0.425);
    padding:30px;
    width:300px;
}
.company:last-child {
    border-right:none;
}
.company h4 {
    margin-top:20px;
    text-transform:uppercase;
    font-size:18px;
}
.company p {
    margin-top:10px;
    font-size:13px;
    color:#999;
}
.company img {
    width:150px;
    height:150px;
    border-radius:75px;
}



.services--studio-content {
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.services--studio-content h2 {
    font-size:30px;
    margin-top:15px;
}
.services--studio-content p {
    font-size:18px;
    font-weight:400;
    margin-top:15px;
    color:#999999;
}
.services--studio-content img {
    display: block;
    margin: 0 auto;
    height:700px;
}


.photos--services {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:50px;
}
.services--photos-title h2 {
    font-size:30px;
    margin-top:15px;
}
.services--photos-title p {
    font-size:18px;
    font-weight:400;
    margin-top:15px;
    color:#999999;
}


/* Remove os marcadores da lista */ 
#benefits-list { 
    list-style-type: none;
    padding-left: 0; /* Remove a indentação padrão */ 
} 

.slideArea {
    border:5px solid #133272;
    box-shadow:0px 0px 20px #000;
    margin-top:20px;
    border-radius:5px;
    width:900px;
}
.carousel-item img {
    height:600px;
    width:900px;
}




.white {
    background-color:#FFF;
    margin:auto;
}
.area--services {
    background-color:#133272;
    color:#FFF;
    padding:30px;
}
.area--services h1 {
    text-align:center;
    font-size:35px;
    margin-top:10px;
    margin-bottom:10px;
}

.services--content {
    display:flex;
    justify-content:center;
    margin-bottom:50px;
}
.service {
    text-align:center;
    border-right:1px solid rgba(255, 255, 255, 0.425);
    padding:30px;
    width:300px;
    height:auto;
}
.service:last-child {
    border-right:none;
}
.service h4 {
    margin-top:20px;
    text-transform:uppercase;
    font-size:18px;
}
.service p {
    margin-top:10px;
    font-size:13px;
    color:#999;
}
.service img {
    width:60px;
    height:60px;
}






.area--products {
padding: 50px;
}
.products--body {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.products--title h2 {
    font-size:30px;
    margin-top:15px;
}
.products--title p {
    font-size:18px;
    font-weight:400;
    margin-top:15px;
    color:#999999;
}

.products--content {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}


.product {
    margin-left:20px;
    margin-right:20px;
    margin-bottom:20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    color:#FFF;
    width:400px;
    padding:20px;
    background-image:linear-gradient(to bottom,#133272,#0f3fa0 , #222d42);
    border:2px solid #0d2350;
    border-radius:5px;
}
.fusion,
.ultra {
    background-image:linear-gradient(to bottom, #000,#3a3a3a , #202020);
    border:3px solid #333;
}
.product h5 {
    font-weight:700;
}
.product-text {
    font-weight:300;
}
.product-text ul {
    padding:10px;
    list-style:inside;
}
.product-text li {
    padding:10px;
}

.photos--ppf {
    padding: 50px;
}

.productImageArea img {
    max-width: 100%;
    border-radius: 5px;
    border:5px solid #0d2350;
}


/*.videoArea {
    max-width: 100%;
    overflow: hidden;
}*/
.videoArea {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* proporção 16:9 para vídeo */
    overflow: hidden;
}
.videoArea video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
}


.contact--body {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border:3px solid #133272;
    border-radius:5px;
    padding:30px;
}
.contact--title h2 {
    font-size:30px;
    margin-top:15px;
}
.social--media {
    margin-right:50px;
    font-size:28px;
}
.social--media img {
    width:40px;
    height:40px;
    margin-right:5px;
}
.media {
    padding:20px;
}
.area--social { 
    display:flex;
    align-items:center;
}

.atendimento {
    max-width:320px;
    text-align:center;
}
.local img {
    margin-bottom:10px;
}
.local p:last-child {
    font-weight:600;
    color:#5e5e5e;
}

.voltar--inicio {
    text-align:center;
    margin-top:30px;
}
.voltar--inicio a {
    text-decoration:none;
    color:#FFF;
    background-color:#133272;
    padding:15px;
    font-size:15px;
    border-radius:5px;
}
.voltar--inicio a:hover {
    background-color:#0d2350;
}




footer {
    background-color:#000;
    margin-top:80px;
    height:100px;
    color:#333;
    text-align:center;
    padding:50px;
}
footer a {
    text-decoration:none;
    color:#999;
}

#wppButton { 
    display: none; /* Começa oculto */ 
    position: fixed; 
    bottom: 20px; 
    right: 30px; 
    z-index: 99; 
    font-size: 18px; 
    border: none; 
    outline: none; 
    cursor: pointer; 
    background-color: transparent;
} 
#wppButton img {
    width:40px;
    height:40px;
}
/*Responsividade*/
@media (max-width:997px){

}
@media (max-width:917px){
    .slideArea {
        width:750px;
    }
    .carousel-item img {
        height:510px;
    }
    .social--media {
        font-size:20px;
    }
}

@media (max-width:845px){
    .company--content{
        flex-wrap:wrap;
    }
    .company{
        border-right: none;
    }
}

@media (max-width:766px){
    .header--area {
        padding:10px;
    }
    .slideArea {
        width:550px;
    }
    .carousel-item img {
        height:415px;
    }
    .menu li a {
        font-size:15px;
    }
    .wpp--num a {
        font-size:20px;
    }
    .social--media {
        font-size:15px;
    }
    .social--media img {
        width:20px;
        height:20px;
    }
    .banner--principal {
        background-position:center;
    }
}
@media (max-width:614px) {
    .header--area {
        flex-direction:column;
        align-items:center;
    }
    .menuMobile {
        display:flex;
        flex-direction:column;
        justify-content:space-around;
        position:absolute;
        left:10px;
        top:200px;
    }
    .menu nav ul {
        flex-direction:column;
        display:none;
        position:absolute;
        left:0;
        width:100%;
        background-color:#133272;
    }
    .menu nav ul a {
        margin:0;
        padding:7px;
        color:#FFF;
        line-height:20px;
        border-bottom:1px solid #0d2350;
    }
    .menu--area {
        align-items:center;
    }
    .wpp--area {
        width:180px;
        margin-top:10px;
        margin-bottom:10px;
    }

    .photos--studio {
        padding:30px;
    }
    .services--studio-content img {
        height:330px;
    }

    .slideArea {
        width:450px;
    }
    .carousel-item img {
        height:330px;
    }

    .company--content{
        flex-direction:column;
        margin:0;
    }
    .company {
        border:0;
        border-bottom:1px solid #0d2350;
    }
    .company:last-child {
        border-bottom:none;
    }

    .services--content {
        flex-direction:column;
        margin:0;
        align-items: center;
    }
    .service {
        border:0;
        border-bottom:1px solid #0d2350;
    }
    .service:last-child {
        border-bottom:none
    }

    .area--products {
        padding: 30px;
    }

    .photos--ppf {
        padding: 30px;
    }

    .area--social {
        display:flex;
        flex-direction:column;
    }
    .social--media {
        text-align:center;
        margin:0;
    }
}

@media (max-width:467px) {
    .area1 {
        display:flex;
        flex-direction:column;
    }
    .area1--content {
        padding:30px;
    }
    .photos--services {
        padding:30px;
    }
    .slideArea {
        width:300px;
    }
    .carousel-item img {
        height:230px;
    }
    .product {
        width:300px;
        margin:0;
        margin-bottom:10px;
        padding:5px;
        font-size:13px;
    }

    .videoArea {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%; /* proporção 16:9 para vídeo */
        overflow: hidden;
    }
    .videoArea video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
    }
    footer {
        font-size:10px;
    }
}
@media (max-width:357px) {
    h1, h2, h4, h5 {
        font-size:18px !important;
    }
    .company {
        width: 280px;
    }
    p, .contact--body {
    font-size:15px !important;
    }
}