*{
        margin:0px;
        padding:0px;
        font-family: Arial, Helvetica, sans-serif;
    }    
    
    html {
        scroll-behavior: smooth;
        scroll-padding-top: 80px;
        scrollbar-width: none;
    }

    ::-webkit-scrollbar {
        display: none;
    }

    body{
        margin:0px;
        padding:0px;
        overflow-x: hidden;
        -ms-overflow-style: none;
        background-color: #f7f7f7;
    }

    .debug{
        border:1px solid rgb(221, 0, 0);
    }

    /* textFormat */

        .textWhite{
            color: #fff;
        }

        .textBlue{
            color: #0B3A66;
        }

        .textGray{
            color: #6E6E6E;
            /* #6E6E6E → cinza médio */
            /* #A8A8A8 → cinza claro */
            /* #D1D1D1 → cinza bem claro (efeito metálico) */
        }
    /* ############ */

    /* ButtonFormat */

        .buttonDiv {
            display: flex;
            justify-content: center;
            width: 100%;
            align-self: center;
            margin: 1rem 0;
        }

        .actionButton {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;

            padding: .8rem 1.2rem;

            width: fit-content;
            max-width: 100%;

            white-space: nowrap;

            background-color: #1C7FBF;
            color: #fff;
            border: none;
            border-radius: .5rem;
            font-weight: bold;
        }

        .contactButton {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;

            padding: 1rem;
            text-align: center;
            align-items: center;

            width: fit-content;
            max-width: 100%;

            white-space: nowrap;

            background-color: rgb(0, 202, 0);
            color: #fff;
            border: none;
            border-radius: .5rem;
            font-weight: bold;
        }

        .contactButton p{
            margin:0;
        }

        .contactButton img, .actionButton img{
            height: 1.2rem;
            width: auto;
        }

        .contactButton:hover, .actionButton:hover {
            transform: scale(1.05);
            transition: 0.2s;
        }

    /* ################### */

    /* Navbar */
        .custom-navbar{
            top: 0;
            left: 0;
            width: 100%;
            height: 70px;
            display: flex;
            z-index: 1000;
            position: fixed;
            list-style: none;
            padding: .5rem 1rem;
            align-items: center;
            background-color: #fff;
            justify-content: space-between;
            box-shadow: 1px 2px 10px #b4b4b4;
        }

        .showSideMenu{
            rotate: 90deg;
            margin-left:.5rem;
            font-size: 1.3rem;
        }

        .navbarImage{
            height: 50px;
            width: auto;
        }
    /* ################## */

    /* ################## */
    
    .logoDiv{
        margin-top: 70px;
        max-height: fit-content;
        width: 100%;
        
        background-image: 
        linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
        url("./images/silveira-engenharia-backgroundimage2.png");
        
        background-size: cover;
        background-position: center;
        /* filter: brightness(1.2); */

        /* background-color: #c2c2c2; */

        /* display: flex; */
        /* flex-direction: column; */
        /* justify-content: space-around; */
        align-items: center;

        text-align: center;

        padding: 1rem;
        /* gap: 1rem; */
        /* overflow: hidden; */
    }

    .titleDiv{
        margin: auto;
        margin-bottom: 1rem;
        width: 90%;
        display: flex;
        justify-content: center; 
        align-items: center;     
        font-weight: bolder;
        text-align: center;
        align-items: center;
        /* margin: 0 0 1rem 0; */
    }

    .title{
        margin: auto;
        width: 100%;
        font-size: 1.5rem;
        color:#fff;
    }

    /* ################## */
    
    /* ################## */

    .projectsDiv{
        padding: 2rem 1rem;
        overflow: hidden;
        margin: 1rem auto; 
        text-align: center; 
        align-items: center;           
        flex-direction: column;
        justify-content: center;
        max-height: fit-content;
    }        

    .carousel {
        margin: auto;
        height: 70vh;
        display: flex;
        overflow: hidden;
    }

    .carousel-control-prev, .carousel-control-next{
        z-index: 9999;
    }

    .carousel-item {
        margin:auto;
        height: 100%;
        align-items: center;
    }
    
    .imageDiv{
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    .backgroundImg{
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        filter: blur(5px);
        object-fit: cover;
        position: absolute;
        pointer-events: none;
        transform: scale(1.1);
        background-color: darkgrey;
    }

    .centralImg{
        width: 100%;
        height: 100%;
        margin: auto;
        z-index: 100;
        position:relative;
        object-fit:contain;
        pointer-events: none;
    }

    /* ########################### */

    .especialityDiv{    
        display: flex;
        padding: 1rem;
        overflow: hidden;
        margin: 1rem auto; 
        text-align: center; 
        align-items: center;
        flex-direction: column;
        justify-content: center;
        max-height: fit-content; 
    }
    
    .custom-card{
        width: 100%;
        display: flex;
        overflow: hidden;
        text-align: left;
        margin: 2rem auto; 
        padding: 2rem 1rem;
        align-items: center; 
        border-radius: 1rem; 
        justify-content: left;
        flex-direction: column; 
        background-color: #fff;
        box-shadow: 1px 5px 5px 5px #9e9e9e;
    }

    .cardImgDiv{
        margin: .5rem 0;
        width: 100%;
        object-fit: cover;
    }

    .cardImg{
        padding: 0 .1rem;
    }

    /* ########################## */

    .infoImg img{
        margin: 1rem 0;
        width: 90%;
        height: 90%;
        object-fit: cover;
    }

    .infoDiv img{
        object-fit: cover;
    }

    .infoTtl{
        font-size: 1.5rem;
        margin: .5rem auto;
        font-weight: bolder;
    }

    .infoTxt{
        width: 85%;
        margin: auto;
    }

    /* footer  {*/

    .footer{
        padding:3rem 1rem;
        background-color: #0B3A66;
        color: #fff;
        text-align: center;
        align-items: center;
    }

    .localizacao{
        padding: 1rem;
        width: 90%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        
        margin: 1rem auto;
        border-radius: 1rem;
    }

    .locationMap{
        width:80%;
        height:20rem;
    }

    /* Contadores */

    .counterSection{
        text-align: center;
        align-items: center;
    }


    .counterDiv{
        align-items: center;
        margin: auto;
        display: grid;
        padding: 2rem 0;
        text-align: center;
        align-items: center;
    }

    .counter{
        width: 70%;
        padding: 1rem;
        text-align: center;
        align-items: center;
        margin: 1.5rem auto;
        border-radius: .3rem;
    }

    .counterBlue{    
        background-color: #1C7FBF;        
    }

    .counterGray{
        background-color: #a3a3a3;
        /* background-color: #A8A8A8; */
    }

    /*  */

    .ctaDiv{
        margin: auto;
        display: flex;
        padding: 5rem 0;
        overflow: hidden;
        text-align: center; 
        align-items: center;
        flex-direction: column;
        justify-content: center;
        max-height: fit-content;
        color:#fff;
    }

    @media (max-width:768px){

        body{
            /* padding: 2rem; */
        }

        .navbarOptions{
            display: none;
            /* gap: 2rem; */
            align-items: center;

            list-style: none;
            /* margin: 0; */
            /* padding: 0 !important; */
        }

        .navbarLink a{             
            text-decoration: none;
            color: #000;
            font-weight: 500;

            display: block;     
            padding: 0.5rem 0;  
            transition: 0.3s;
            display: none;
        }

        .navbarHamburguer a{
            rotate: 90deg;
            display: block;
            font-size: 1.3rem;
            font-weight: bolder;
        }

        .sideBar{
            right: 0;
            width: 85%;
            padding: 0;
            z-index: 100;
            height: 100vh;
            display: flex;
            position: fixed;
            list-style: none;
            text-decoration: none;        
            flex-direction: column;
            background-color: #fff;
            transform: translate(110%);
            padding: 1rem 1rem 1rem 1rem;
            justify-content: space-between;
            transition: transform 0.4s ease; /* animação suave */
            box-shadow: -3px -2px 10px #b4b4b4;
        }

        .sideBarActive {
            transform: translateX(0); /* 🔥 visível */
        }

        .sideBarOptions{
            padding: 0;
        }

        .sideBarLink {
            padding: 0; /* remove o padding daqui */
            list-style: none;
            font-weight: 600;
            margin: 0 0 .1rem 0;
        }
        
        .sideBarLink:hover{
            background-color: #f3f3f3;
        }

        .sideBarLink a {
            display: block;          /* 🔥 ESSENCIAL */
            width: 100%;
            height: 100%;
            padding: 1rem;           /* move o padding pra cá */
            color: #000;
            text-decoration: none;
        }

        /* .divEnd{
             margin-top: auto;
        } */

        .divisor{
            width:30%;
            height: .3rem;
            margin: 0 auto 1rem auto;
            background-color: #0B3A66;
        }
        
        .logoImg{
            /* filter: brightness(1.3); */
            width: 90%;
            height: 90%;
            margin: auto;
        }

        /* .titleDiv{

        } */

        /* .title{

        } */

        /* .buttonDiv{

        } */

        /* ################################### */

        .infoDiv{
            display: flex;
            padding: 1rem;
            overflow: hidden;
            margin: 1rem auto; 
            text-align: center; 
            align-items: center;
            flex-direction: column;
            justify-content: center;
            max-height: fit-content;
        }

        /* .subInfoDiv{
            text-align: left;
            height: 100%;
        } */

        /* .infoImg img{
            margin: 1rem 0;
            width: 90%;
            height: 90%;
            object-fit: cover;
        } */

        /* ###################################### */

        /* .especialityDiv{ 
        } */

        .especialityButtonDiv{
            display: block;
            /* background-color: yellow; */
            width: 100%;
        }

        /* ########################### */
        
        .trustDiv{
            display: flex;
            padding: 1rem;
            overflow: hidden;
            margin: 1rem auto; 
            text-align: center; 
            align-items: center;
            flex-direction: column;
            justify-content: center;
            max-height: fit-content;
        }

        /* ########################### */

        /* .counterDiv{  
            align-items: center;
            margin: auto;   
            display: grid;
            padding: 2rem 0;
            text-align: center;
            align-items: center;
        } */

        /* ########################### */

        .ctaDiv{
            width: 90%;
        }
    }

    @media (min-width:769px){

        .navbarOptions{
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: max-content;
            gap: 2rem;
            align-items: center;

            list-style: none;
            margin: 0;
            padding: 0 !important;
            width: 100%;
        }

        .navbarLink{
            border-radius: .5rem;
            width: 100%;
            text-align: center;
            align-items: center;
        }

        .navbarLink a{             
            text-decoration: none;
            color: #000;
            font-weight: 500;

            display: block;     
            padding: 0.5rem 0;  
            transition: 0.3s;
            padding: .5rem;
            
        }

        .navbarLink:hover{
            background-color: #f3f3f3;
        }

        .navbarHamburguer{
            display: none;
        }

        .sideBar{
            display: none;
        }

        .sideBarActive {
            transform: translateX(0); /* 🔥 visível */
        }

        .sideBarOptions{
            padding: 0;
        }

        .sideBarLink {
            padding: 0; /* remove o padding daqui */
            list-style: none;
            font-weight: 600;
            margin: 0 0 .1rem 0;
        }
        
        .sideBarLink:hover{
            background-color: #f3f3f3;
        }

        .sideBarLink a {
            display: block;          /* 🔥 ESSENCIAL */
            width: 100%;
            height: 100%;
            padding: 1rem;           /* move o padding pra cá */
            color: #000;
            text-decoration: none;
        }

        /* .divEnd{
        } */

        .divisor{
            width:20%;
            height: .3rem;
            margin: 0 auto 1rem auto;
            background-color: #0B3A66;
        }

        .logoImg{
            filter: brightness(1.3);
            height: 25rem;
        }

        /* ######################################################################## */

        .infoDiv{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            padding: 1rem;
            width: 80%;
            overflow: hidden;
            margin: 1rem auto; 
            text-align: center; 
            align-items: center;
            /* flex-direction: column; */
            justify-content: center;
            max-height: fit-content;
        }

        .subInfoDiv{
            text-align: left;
            height: 100%;
        }

        /* .infoImg img{
            margin: 1rem 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        } */

        /* ################################################## */

        .especialityDiv{    
            width: 90%;
        }

        .cardsDiv{
            gap:1.5rem;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }

        .custom-card{
            width: 100%;        
        }

        .especialityButtonDiv{
            display: flex;
            /* background-color: yellow; */
            width: 100%;
        }

        /* ################################## */

        /* ########################### */

        .carousel {
            width: 90%;
            height: 80vh;
        }

        /* ########################### */

        .trustDiv{
            display: flex;
            padding: 1rem;
            overflow: hidden;
            margin: 1rem auto; 
            text-align: center; 
            align-items: center;
            flex-direction: column;
            justify-content: center;
            max-height: fit-content;
        }

        /* ################################## */

        .counterDiv{  
            /* width: 80%;   */
            grid-template-columns: repeat(2, 1fr);                               
        }

        /* .counterDiv{  
            width: 80%;
            align-items: center;
            margin: auto;   
            display: grid;
            grid-template-columns: repeat(2, 1fr);       
            padding: 2rem 0;
            text-align: center;
            align-items: center;
        } */

        /* ############################## */

        .ctaDiv{
            width: 60%;
        }

    }