@font-face {
    font-family: 'TheSeasons';
    src: url('../webfonts/theseasons.woff2') format('woff2'),
         url('../webfonts/theseasons.woff') format('woff'),
         url('../webfonts/theseasons.otf') format('opentype');
}
body{font-size: 15px;}
body#dark{background-color: #141414;}
body#dark .bg-color-white {background-color: #141414; color: #fff;}
body#dark h1, body#dark  h2, body#dark  h3, body#dark  h4, body#dark  h5, body#dark  h6,  body#dark .h1,  body#dark .h2,  body#dark .h3,  body#dark .h4,  body#dark .h5,  .h6{color: #fff; letter-spacing: 2px;}
body#dark #service-section h3, body#dark #service-section h5{color: #fff;}
body#dark #service-section{background-color: #141414; color: #fff; margin-top: 0px; padding-top: 80px;}
body#dark .quanto-service-box6{background-color: #141414; }
body#dark .quanto-service-box6 img{filter: invert(1);}
body#dark #service-section2{background-color: #000; color: #fff;}
body#dark .quanto-service-box4 svg{filter: invert(1);}
body#dark .quanto-blog-section h3, body#dark .quanto-blog-section h5, #quanto-team-area h3{color: #141414 !important; font-size: 39px;}
 body#dark .quanto-blog-section h5 {color: #141414; font-size: 20px; height: 60px;}
h1,  h2,  h3{font-family: "Poppins", sans-serif; /*font-family: 'TheSeasons' !important;*/ font-weight: normal !important; text-transform: uppercase;}
.main-menu a{font-weight: 500; font-size: 16px;}
.quanto-service-box4 .service-title {font-size: 25px;}
.quanto-service4-section{margin-top: 100px;}
h1.title-hero{color: #fff !important; font-size: 80px;}
.quanto-hero__content .title span {margin-left: 0px;}
footer{font-size: 16px !important;}
.quanto-menu-large-toggle{color: var(--color-white); font-weight: 500; font-size: 16px;}
.desktop-sidemenu .sidemenu-body .revew * {margin-right: 5px; display: inline-block;}
.testimonial-content p {font-size: 15px; line-height: 160%; letter-spacing: 0px;}
.quanto-testimonial__thumb-slider .testimonial-img, .quanto-testimonial__thumb-slider2 .testimonial-img{height: 800px;}
.quanto-testimonial-section{background-color: #fff; padding-bottom: 120px;}
.marquee-container{top: 98px;margin-top: 30px !important;}
.quanto-testimonial3-section{background-color: #fff;}
.quanto-hero__content{z-index: 99 !important; position: relative;}
@media only screen and (min-width: 768px) {.testimonial3-content p {font-size: 18px;}}
.quanto-about-area2{padding-top: 120px; padding-bottom: 30px;}
.quanto-video-area{margin-top: 75px; background: #000;}
.btn-hero{background-color: #fff !important; color: #141414 !important; padding: 14px 20px 14px 24px !important; border-radius: 40px !important; border: 1px solid #fff !important; margin-top: 50px !important; margin-bottom: 20px !important;}
.btn-hero span .arry1, .btn-hero span .arry2{color: #141414 !important;}
.quanto-service-box4 .service-title {font-size: 18px; text-transform: uppercase;}
#service-section2 h3{font-size: 39px;}
.quanto-link-btn{border-bottom: 0px;}
.quanto-link-btn svg{margin-right: 4px;}
.process-box{padding: 70px 40px; max-width: 100%;}
.process-box .service-list{margin-top: 30px;}
.process-box .process-title{font-size: 20px !important; text-transform: uppercase; height: 45px;}
.process-box:hover .process-title, .process-box:hover .service-list li{color: #141414 !important;}
.blog-contact-form{margin-top: 80px;}
.blog-contact-form h4{font-size: 30px; text-transform: uppercase; color: #141414 !important;}
.blog-contact-form .row-margin-top {margin-top: 25px;}
#quanto-team-area{padding-bottom: 90px;}
.blog-item .blog-contact-form .quanto-cform .form-control{padding: 17px 24px; font-size: 16px;}
footer h1{font-size: 80px;}
footer .marquee-container {top: 65px; margin-top: 0px !important;}
.footer-widgets .social-links ul li a{background: #282828;}
.footer__bottom-content .copyright-text {font-size: 12px; line-height: 27px;}
body#dark h3{font-size: 39px !important;}
body#dark #service-section{padding-top: 120px;}
.video-background {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden;}
.video-background video {width: 100%; height: 100%; object-fit: cover;}
.quanto-hero5-section {position: relative; z-index: 1; height: 100vh;}
.quanto-hero__content {position: relative; z-index: 2;}
h1.title-hero{font-size: 50px;}
body#dark h5.author-title{color: #141414;}
.quanto-testimonial3-section h3.title{color:#141414 !important}
.quanto-about-area2 {padding-top: 70px; padding-bottom: 30px;}
.testimonial-content .author-designation{font-weight: 600; margin-bottom: 25px; display: block;}
.tp-project-4{
    &-text{
        & span{
            font-size: 15px;
            font-weight: 500;
            line-height: 20px;
            text-transform: uppercase;
            font-family: var(--tp-ff-poppins);
            color: rgba(183, 171, 152, 0.50);
        }
    }
    &-title{
        font-size: 16px;
        font-weight: 500;
        line-height: 1;
        text-transform: uppercase;
        color: var(--tp-cream-1);
        font-family: var(--tp-ff-poppins);
    }
    &-wrapper{
        margin: 0px -15px;
    }
    &-inner-wrap{
        width: 100%;
        display: flex;
        grid-area: list;
        box-sizing: border-box;
        @media #{$xs}{
            flex-wrap: wrap;
        }
    }
    &-item{
        width: calc(3 * calc(1/10 * 100%));
        height: 615px;
        display: block;
        position: relative !important;
        left:0!important;
        top:0!important;
        margin:0px 15px;
        transition:width 0.6s cubic-bezier(0.38, 0.005, 0.215, 1);
        @media #{$xs}{
            width: 100%;
            margin-bottom: 30px;
        }
        &:hover{
            width:calc(8 * calc(1/10 * 100%));
            @media #{$xs}{
                width: 100%;
            }
        }
    }
    &-thumb{
        height: 100%;
        width: 100%;
        margin-bottom: 30px;
        & img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    &-2{
        &-year{
            & span{
                color: #403C38;
                font-size: 13px;
                font-weight: 500;
                line-height: 1;
                margin-top: 15px;
                margin-right: 130px;
                display: inline-block;
                transition: .3s;
                text-transform: uppercase;
                font-family: var(--tp-ff-poppins);
                @media #{$xs}{
                    margin-right: 30px;
                }
            }
        }
        &-title{
            font-size: 46px;
            font-weight: 400;
            line-height: 1;
            color: #403C38;
            letter-spacing: -1.84px;
            font-family: var(--tp-ff-playfair);
            transform: .3s;
            @media #{$xs}{
                font-size: 30px;
            }
            &-box{
                & span{
                    color: #403C38;
                    font-size: 13px;
                    font-weight: 500;
                    line-height: 1;
                    text-transform: uppercase;
                    font-family: var(--tp-ff-poppins);
                    @media #{$xs}{
                        font-size: 11px;
                    }
                }
            }
        }
        &-link{
            & span{
                color: #403C38;
                display: inline-block;
                transition: .3s;
            }
        }
        &-item{
            border-bottom: 1px solid rgba(183, 171, 152, 0.14);
            padding: 40px 0;
            position: relative;
            &::after{
                position: absolute;
                bottom: 0;
                left: 0;
                width: 0%;
                height: 1px;
                background-color: var(--tp-pink-3);
                content: '';
                transition: .4s;
            }
            &:first-child{
                border-top: 1px solid rgba(183, 171, 152, 0.14);
            }
            &:hover{
                & .tp-project-4-2-year span {
                    color: var(--tp-cream-1);
                }
                & .tp-project-4-2-title {
                    color: var(--tp-cream-1);
                }
                & .tp-project-4-2-title-box span {
                    color: var(--tp-cream-1);
                }
                & .tp-project-4-2-link span {
                    color: var(--tp-cream-1);
                    transform: rotate(-45deg);
                }
                &::after {
                    width: 100%;
                }
            }
            &.active{
                & .tp-project-4-2-title {
                    color: var(--tp-cream-1);
                }
                & .tp-project-4-2-year span {
                    color: var(--tp-cream-1);
                }
                & .tp-project-4-2-title-box span {
                    color: var(--tp-cream-1);
                }
                & .tp-project-4-2-link span {
                    color: var(--tp-cream-1);
                }
            }
        }
    }
}
.tp-project-4-2-item{
    & .tp-hover-reveal-bg{
        position: absolute;
        top: 0;
        left: 0;
        width: 370px;
        height: 470px;
        opacity: 0;
        margin: -150px 0 0 -150px;
        overflow: hidden;
        pointer-events: none;
        z-index: 99;
        @include background();
        @include transition-mul((opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1)));
        @media #{$xs}{
            height: 240px;
            width: 240px;
        }
    }
    &:hover{
        & .tp-hover-reveal-bg{
            opacity: 1;
        }
    }
}
.tp-project-4-text span{
  text-transform: inherit;
  text-align: center;
  display: block;
  font-size: 26px;
}
.tp-project-4-item:hover{
  width: 45%;
}
.tp-project-4-2-item::after{
  background-color: #1A3BE2 !important;
}
.tp-project-4-2-item{
  cursor: pointer;margin-top: 70px ; border-bottom:
1px solid #424242;
  padding-bottom: 20px;
}
.content-detail{color: #fff !important; padding-left: 69px; margin: 20px 0; padding-right: 60px;}
.tp-project-4-2-item span{color: #fff !important; font-size: 14px;}
.tp-project-4-2-year{padding-right: 50px; padding-top: 2px;}
.tp-project-4-2-title{font-size: 40px !important; letter-spacing: 0px;}
.tp-project-4-2-item svg{transition: .3s;}
.tp-project-4-2-item:hover svg{rotate: 90deg; transition: .3s;}
.quanto-testimonial3-section h3{padding-top: 100px;}
body#dark h5.client-name{color:#141414 !important}
.testimonial3-content .client-designation {margin-top: 10px; font-size: 16px; font-weight: 400; font-style: italic;}
.team-member-name{color:#fff !important}
.quanto-team-box .team-thumb ul{left: 50px; right: auto; top: 90%;}
#quanto-team-area {padding-bottom: 90px; background: #fff;}
#quanto-team-area-sobre{background-color: #141414;}
.quanto-team-box .team-thumb ul li a{line-height: 19px;}
.quanto-hero5-section-template {padding-top: 200px;}
.contact-info svg{position: relative;top: -1px;}
.desktop-sidemenu .footer-widgets .social-links ul {display: flex; justify-content: start; flex-wrap: wrap;gap: 8px; margin-top: 40px;}
.menuBar-toggle svg, .menuBar-toggle i {color: #fff;}
.quanto-menu-wrapper .quanto-menu-area{background-color: #141414;}
.quanto-mobile-menu ul li a{color: #fff !important;}
.quanto-menu-wrapper .mobile-logo{background-color: transparent;}
.quanto-mobile-menu-btn .sidebar-wrap h6{font-size: 14px; margin-bottom: 10px; font-weight: 500;}
.quanto-mobile-menu-btn p{color: #fff;}
.quanto-menu-wrapper .quanto-menu-toggle i {color: #fff; font-size: 29px; position: absolute; right: 12px;}
.quanto-header{padding: 0 30px;}
footer h1 {font-size: 40px; letter-spacing: -1px;}
.marquee-container .marquee .marquee-item-container .marquee-item svg {width: 70px; height: 70px; margin:0 40px;}
.desktop-sidemenu .sidemenu-body {padding:20px 80px 15px;}
#quanto-team-area-sobre{padding-bottom: 40px;}
body#dark .tp-project-4-2-item h4{ transition: .3s;}
body#dark .tp-project-4-2-item:hover h4{color: #d2d2d2 !important;}
.desktop-sidemenu .sidemenu-header .btn-close{width: 50px; height: 50px;}
.img-box-blog{height: 500px; background-repeat: no-repeat; background-size: cover; background-position: center;}
.blog-detail-page {padding-top: 100px; background: #fff;}
.blog-title h2{color: #141414 !important; font-size: 42px;}
.quanto-mobile-menu ul .quanto-item-has-children > a .quanto-mean-expand {position: absolute; left: -45px; top: 7px; font-weight: 400; font-size: 16px; width: 60%; height: 40px; padding:0 15px; line-height: 40px; display: flex; align-items: center; justify-content: flex-end; text-align: center; background-color: transparent; color: #fff; transition:all ease 0.4s;}
.service-body{padding-right: 30px;}
/*.quanto-blog-thumb {height: 420px;background-position: center;background-repeat: no-repeat;background-size: cover;}*/
.service-body li {list-style: none;}
.form-control:focus{box-shadow: 0 0 0 .25rem rgba(0, 0, 0, 0.25);border-color: #282828;}
.section-padding-top-bottom {padding-top: 100px; padding-bottom: 90px;}
.quanto-about-area2-pagina-sobre{padding-bottom: 110px; padding-top: 50px;}
.testimonial3-content{padding-left: 30px;}
.testimonial3-navigation{padding-left: 30px;}
.main-menu ul.sub-menu li a{font-size: 15px;}
.main-menu ul.sub-menu{min-width: 280px;}
.quanto-link-btn{font-size: 17px;}
.quanto-blog-thumb {
  height: 400px;
  overflow: hidden;
}
#subirTopo {
    text-decoration: none;
    /*bottom: 410px;*/
    bottom: 30px;
    /*right: 10px;*/
    right: 35px;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    position: fixed;
    border: 0;
    border-radius: 50px;
    transition: 0.3s ease-in-out;
    text-align: center;
    /*background-color: #565b5f;*/
    /*height: 60px;*/
    /*width: 150px;*/
    z-index: 9999;
    opacity: .8;
}
#subirTopo:hover{
    opacity: 1;
}
#subirTopo button {
    background-color: #464646;
    border: 1px solid #464646;
}
#subirTopo button:hover {
    background-color: #000;
    border: 1px solid #000;
}
.quanto-link-btn.btn-pill{letter-spacing: .5px;}

.blog-item .blog-contact-form h4{font-family: "Poppins", sans-serif;font-weight: normal !important;
  text-transform: uppercase; font-size: 42px;}
.quanto-blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.quanto-primeira-dobra{padding-bottom: 90px;}
.quanto-primeira-dobra, .quanto-primeira-dobra h3{text-align: center !important; letter-spacing: 1px;}
.link-servicos{font-weight: 600; display: block; margin-top: 12px;}
.process-box {
  &:hover {
    & .process-info {
      & .process-title, & span {
        color: var(--color-primary);
      }
    }
  }
}

.close-btn {
  display: inline-block;
  cursor: pointer; /* Aponta que é clicável */
  transition: transform 0.3s ease-in-out; /* Transição suave */
  transform-origin: center; /* Define o ponto de rotação no centro */
}

.close-btn:hover {
  transform: rotate(45deg); /* Gira o "X" 180 graus */
}
.modal-header{border-bottom: var(--bs-modal-header-border-width) solid #dde1e617;}
span.close{
    font-size: 55px;
  position: absolute;
  right: 25px;
  font-weight: 300;
}
#descricaoServico{margin: 15px 0px;}
#caracteristicasServico li{margin-bottom: 10px;}
.modal-content{background-color: #191919; color: #fff;border-radius: 0px;}
.modal-content {
  color: #fff;
  padding: 30px 35px !important;
  padding-left: 20px !important;
}
.blog-item .blog-contact-form h4{font-size: 28px;}
footer h1{font-size: 40px; text-transform: none !important; margin-right: 100px;}
footer h1::first-letter {
  text-transform: uppercase;
}
#section-pagina-interna{height: auto; background-color: #141414 !important; padding-bottom: 10px !important; padding-top: 80px !important;}

.quanto-about-area2-pagina-sobre{padding-top: 0px; margin-top: -90px;}

#section-pagina-interna h1.title-hero {
  font-size: 42px;
  margin-bottom: 40px;
}
.header-title{margin-top: 50px;}
.header-title h1{margin-bottom: 30px;}
.main-menu a {cursor: pointer;}
footer a{cursor: pointer;}
.process-box{cursor: pointer;}
.row-nome-servico{border-bottom: 1px solid #191919; padding-bottom: 40px; margin-bottom: 70px;}
.sobre-page-text{margin-bottom: 40px; margin-top: -65px;}


@media (max-width: 1400px) {
  .container.custom-container {
    max-width: 1240px !important;
  }
}


@media (max-width: 768px) {
    .quanto-hero5-section {
      position: relative;
      z-index: 1;
      height: 60vh;
    }
    body#dark h3, body#dark h1, body#dark  h2, body#dark  h3, body#dark  h4, body#dark  h5, body#dark  h6,  body#dark .h1,  body#dark .h2,  body#dark .h3,  body#dark .h4,  body#dark .h5,  .h6{color: #fff; font-size: 28px !important;}
    .quanto-primeira-dobra .row-padding-top {padding-top: 0px; margin-bottom: 30px;}
    body {font-size: 14px;}
    .quanto-service4-section{padding-top: 90px;}

    body#dark .quanto-service-box4 h5 {font-size: 24px !important;}
    .footer-widgets .widget-title { margin-bottom: 15px; margin-top: 15px; }
    .section-padding-top-bottom {padding-top: 100px; padding-bottom: 20px;}
    body#dark footer h1{font-size: 20px !important; margin-right: 60px;}
    #section-pagina-interna h1.title-hero {font-size: 42px; margin-bottom: 40px; padding-left: 32px; margin-top: -20px }
    .testimonial-content .author-designation{margin-top: 15px;}
    body#dark .nome-adv h3{ margin-top: 60px; text-align: left;}
    body#dark .nome-adv-1 h3{ text-align: left; }
    .quanto-testimonial__thumb-slider .testimonial-img, .quanto-testimonial__thumb-slider2 .testimonial-img {height: 570px;}
    .content-detail {color: #fff !important; padding-left: 15px; margin: 20px 0; padding-right: 15px; }
    .tp-project-4-2-year {padding-right: 15px; padding-top: 2px;}
    body#dark .tp-project-4-2-item h4{font-size: 22px !important;}
    .work-process-section {padding-bottom: 60px;}
    .quanto-testimonial3-section{padding-top: 0px;}
    .quanto-testimonial3-section h3.title { color: #141414 !important; text-align: center; padding-top: 60px; margin-bottom: 25px;}
    .testimonial3-content p {color: var(--color-primary); font-weight: 400; line-height: 160%; letter-spacing: 0; }
    .testimonial3-content {padding-left: 0px; padding: 0 15px;}
    .testimonial3-navigation {padding-left: 11px;}
    .section-padding-top {padding-left: 15px; padding-right: 15px; }
    .blog-detail-page { padding-top: 58px; background: #fff; padding-left: 15px; padding-right: 15px;}
    .service-body {padding-right: 0px;}
    body#dark .quanto-blog-section h5 {height: auto; font-size: 18px !important;}
    .quanto-blog-section{padding-bottom: 60px; padding-top: 70px;}
    .quanto-blog-section .row-padding-bottom {padding-bottom: 20px;}
    body#dark .process-box .process-title {font-size: 20px  !important;  height: auto; line-height: 27px !important;}
    footer {padding-left: 15px; padding-right: 15px;}

    body#dark .quanto-mobile-menu-btn .sidebar-wrap h6 { font-size: 18px !important; margin-bottom: 10px; font-weight: 500;}
    .quanto-menu-wrapper .quanto-menu-area{max-width: 100%;}
}