/*CORES PADRÕES*/
:root{
    --bg-body: #182C48;
    --hover: #FFC900;
    --color-btn: #FFC900;
    --btn-see-more: #FFC100;
    --border-cards: #FFC900;
    --titles: #ffff;
    --subtitle: #ffff;
    --subtitles-line: #FFC900;
    --lines: #FFC900;
    --title-numbers: #FFC900;
    --description-num: #ffff;
    --subtitle-service: #FFC900;   
}

/** CONFIGURAÇÕES PRINCIPAIS **/

html {
  scroll-behavior: smooth;
}

body{
    padding: 120px 0 0 0 ;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background: var(--bg-body);
}

/* Remove fundo cinza ao tocar em links e botões no iOS */
* {
  -webkit-tap-highlight-color: transparent;
}
a:active, button:active {
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
}


/* Menu mobile: padrão escondido */
.nav-mobile {
    width: 100%; 
    max-height: 0;
    overflow: hidden;
    background-color: #182C48;
    position: absolute;
    top: 60px;
    right: 0;
    transition: max-height 0.3s ease;
    z-index: 1000;
}

/* Lista dentro do menu */
.nav-mobile ul {
    text-align: center;
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-mobile li a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
    font-size: 15px;
}

.nav-mobile li a:hover {
    color: #ffc800;
}

/* Botão mobile */
.menu-toggle {
    display: flex;
    justify-content: center; 
    align-items: center;     
    width: 40px;
    height: 40px;
    font-size: 22px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;              
    user-select: none;
    line-height: 1; 
    padding: 0;   
    text-align: center;
}


/* Exibir e animar o menu mobile */
.nav-mobile.active {
    max-height: 1000px;
    opacity: 1;
    pointer-events: auto;
}

/* Fundo preto transparente */
.nav-overlay {
    position: fixed;
    top: 60px;                 
    left: 0;
    width: 100%;
    height: calc(100% - 60px); 
    background: rgba(0,0,0,0.6);
    display: none;
    transition: opacity 0.3s ease;
    z-index: 900;
}

.nav-overlay.active { display: block;  opacity: 1; visibility: visible;}

/* Titulos Principais*/
.titles{
    text-transform: uppercase;
    color: var(--titles);
    font-size: 55px;
    text-align: center;
}
/*----------------------------*/

/* direcionamento de link */
.link-direct{
    text-decoration: none;
    color: var(--titles);
}
/*----------------------------*/

/* Botão de Orcamento*/
.btn-orcamento {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 377px;
    height: 55px;
    font-size: 24px;
    color: var(--subtitle);
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 60px;
    border: 2px solid var(--color-btn);
    background: var(--color-btn);
    cursor: pointer;
    transition: 0.4s;
    padding: 10px;
    font-family: 'Montserrat', sans-serif;
    
}
    .btn-orcamento:hover 
    { transform: scale(1.08);}
/*----------------------------*/

/*Conf das Linhas com Texto*/
.line-text {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--subtitles-line); 
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 2;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
}

/*Linha a Esquerda*/
#lf{
    flex: 1;
    border: none;
    width: 200px;
    height: 5px;
    background-color: var(--lines);
    margin-right: 15px;
}
/*Linha a Direita*/
#lr{
    flex: 1;
    border: none;
    width: 200px;
    height: 5px;
    background-color: var(--lines);
    margin-left: 15px;
}

.line-text-mobile{
    display: none;
}
/*----------------------------*/
/************************************/

/*CONTAINER DA BARRA DE NEVEGAÇÃO*/
.ctn-header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: space-evenly;
    gap: 58%;
    align-items: center;
    background: url(../Imgs/Fundos/Fundo-header.png) bottom repeat-x;
    background-color: #182C48;
    z-index: 1100; 
}

/*Logo da Barra de Navegação*/
.logo a img{
    width:300px;
    height: auto;
}

/*Opções da Barra de Navegação*/
.nav ul{
    list-style: none;
    display: flex;
    margin: 0; 
    padding: 0;
    gap: 20px;
    
}

.nav ul li {
    position: relative;
    padding-right: 15px; 
    border-right: 3px solid var(--hover); 
}

.nav ul li:last-child {
    border-right: none;
}

.nav ul a{
    text-decoration: none;
    color: var(--subtitle);
    font-size: 21px;
    transition: 0.5s;
}

.nav ul li a:hover{
    color: var(--hover);
}
/*----------------------------*/

/** APRESENTAÇÃO BREVE **/
.ctn-home{
    width: 100%;
    height:720px;
    display: flex;
    justify-content: center;
    align-items: center; 
    background: url(../Imgs/Waves/Detalhe-Onda.png) bottom no-repeat, url(../Imgs/Fundos/bg-princ.png) center;
    
}

/*Container da Logo e mensagem*/
.ctn-contents{
    width: 100%;
    margin-top: -200px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

/*Logo*/
.logo-home img{
   width: 200px;
   height: auto;
}

/*Mensagem*/
#msg-logo{
    width:50%;
    text-align: center;
    color: var(--subtitle);
    font-size: 33px;
    font-weight:600;
}
/************************************/


/** SERVIÇOS **/
.section-services{
    justify-content: center;
    align-items: center;
}

/*Container de Serviços*/
.ctn-services{
    display: flex;
    justify-content: center;
}

/*Grid de Serviços*/
.grid-services-cards{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
    
}

/*Card de Serviço*/
.card-serv{
    width: 300px;
    height: 280px;
    background-color: transparent;
    padding: 20px;
    border-radius: 25px;
    border: 3px solid var(--border-cards);
    border-bottom: 7px solid var(--border-cards) ;
    text-align: center;
    transition: 0.3s;
  }
.card-serv:hover{transform: scale(0.96);}

/*Título do Serviço*/
.title-serv{
    color: var(--titles);
    text-transform: uppercase;
    margin-top: 10px;
    margin-bottom: 15px;
}

/*Descrição do Serviço*/
.desc-serv{
    margin: 0;
    color: var(--subtitle);
    font-size:20px;
}

/*Icone de Janela*/
#icon-janela{
    position: relative;
    top: 9px;
    margin-bottom: 10px;
}

/*Botão Veja Mais*/
#btn-link-see{
    margin-top: 25px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
}

#see-more{
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: var(--subtitle);
    text-transform: uppercase;
    font-weight: bolder;
    border-radius: 8px;
    border: 2px solid var(--color-btn);
    background: var(--btn-see-more);
    cursor: pointer;
    transition: 0.4s;
    padding: 2px 12px 2px 12px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    transition: 0.3s;
}
#see-more:hover{ transform: scale(1.07);}
/************************************/

/** DIFERENCIAS **/
.section-differences{
    justify-content: center;
    align-items: center;
}

/*Ajuste de Posição */
.align-ctn-dif{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/*Grid para os Cards*/
.grid-dif{
    display: flex;
    align-items: center;
    gap: 50px;
}

/*Cards*/
.card-dif{
    width: 347px;
    height: 290px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: transparent;
}

/*Circulo de Fundo*/
.circle-dif-bg{
    width: 110px;
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFC900;
    border-radius: 50%;
}

/*Container de Textos*/
.ctn-texts-dif{
    display: flex;
    color: var(--titles);
    justify-content: center;
    text-align: center;
    align-items: center;
    flex-direction: column;
}

/*Título de Diferencias*/
.title-dif{
    margin: 8px;
    text-transform: uppercase;
}

/*Descrição de Diferencias*/
.desc-dif{
    width: 82%;
    margin: 0;
    font-size:20px;
    color: var(--subtitle);
}

/*Linha Separadora dos Cards*/
.sep-dif{
    width: 5px;
    height: 245px;
    background: var(--lines);
}

/*Ajustes Posição dos Icones*/
.icon-atend{margin-top: 5px;}
.icon-estrela{margin-top: -6px;}
.icon-entrega{margin: 8px 12px 0 0;}


/*NOSSOS NÚMEROS*/
.section-counter {
    margin-top: -20px;

    text-align: center;
  }

/*Imagem de Fundo do Contador de Serviços*/
.bg-counter{
    margin-top: -58px;
    width: 100%;
    height: 560px;
    display: flex;
    justify-content: space-evenly;
    gap: 8%;
    align-items: center;
    background:  linear-gradient(to bottom, rgba(1, 26, 109, 0.2) 70%, rgba(255, 201, 0, 0.3) 100%) ,url(../Imgs/Fundos/esplanadadf.png)  center;
}

/*Número do contador*/
.card-counter h2{
    margin: 0;
    color: var(--title-numbers);
    font-size: 120px;
    text-shadow: 2px 2px 3px rgba(1, 1, 1, 0.8);
}

/*Descrição do contador*/
.card-counter p{
    margin: 0;
    color: var(--description-num);
    font-size: 35px;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
    
}
/************************************/

/** CONTATO **/
/*Titulo de Contato*/
.section-contact .titles{
    margin-bottom: 20px;
}

/*Subitulo de Contato*/
#subtitle-contact{
    font-size: 45px;
    color: var(--subtitle);
    text-align: center;
    margin-bottom: 5px;
}

/*Posição do Container de Contato*/
.align-ctn-cont{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 25px;
}

/*Grid de Contato*/
.grid-contact{
    display: flex;
    align-items: center;
   
}

/*Card de Contato*/
.card-contact{
    width: 100%;
    height: 1%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: transparent;
    transition: 0.4s;
}
.card-contact:hover{transform: scale(1.05);}

/*Texto de Contato*/
.channel-cont{
    color: var(--subtitle);
    margin-top: 25px;
    text-transform: uppercase;
}

 .channel-cont-rs{
    color: var(--subtitle);
    margin-top: 20px;
    text-transform: lowercase;
}
/*----------------------------*/

/*Linhas Separadoras*/
.sep-line-cont{
    width: 5px;
    height: 145px;
    background: var(--lines);
}

/*Infomação de funcionamento e pagamento*/
.info-operation b{
    color: var(--subtitle-service);
}
.info-operation{
    color: var(--subtitle);
    margin: 0 0 15px 0;
    font-size: 25px;
    text-align: center;
}
/*----------------------------*/

/*Infomação de funcionamento e pagamento*/
.info-operation-mobile b{
    color: var(--subtitle-service);
}
.info-operation-mobile{
    color: var(--subtitle);
    margin: 0 0 15px 0;
    font-size: 25px;
    text-align: center;
}
/*----------------------------*/

/*Titulo Sobre a Localização*/
#title-end{
    color: var(--subtitles-line);
    z-index: 1;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}

/*Localização*/
#location{
    position: relative;
    margin-top: -60px;
    z-index: 1;
}

#location iframe{
    width: 100%;
    height: 450px;
    border: 0;
    position: relative;
    z-index: 1;
}

/*Endereço Completo Descrito*/
#full-adress{
    margin: 12px 0 ;
    font-size: 20px;
    text-align: center;
    color: var(--subtitle);
}
/************************************/

/** FOOTER **/
footer{
    width: 100%;
    background: url(../Imgs/Footer/nuvem.png) center no-repeat;
    height:420px;
    border-top: 5px solid var(--lines);
    align-items: center;
    justify-content: center;
    display: flex;
}

.footer-cont{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.footer-info{
    width: 75%;
    height: 200px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 0px;
}

/*Card Footer*/
.card-info-f{
    width: 25%;
    height: 200px;
    align-items: center; 
}

/*Titulo dos Cards*/
.title-footer{
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
    font-size:25px;
    color: var(--titles);
}

/*CARD CONTATO*/
.card-info-f ul{
    padding: 0 0 0 80px;
    margin: 0;
    list-style: none;
    text-align: center;

}

.card-info-f li a{
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    gap: 5px;
    font-size: 18px;
    transition: 0.3s;
}

.card-info-f li a:hover{
    color: var(--hover);
}
/*----------------------------*/

/*CARD AGREDECIMENTO NH*/
.card-info-f p{
    margin: 0;
    text-align: justify;
    color: var(--subtitle);
    font-size: 18px;

}    
 /*----------------------------*/   

/*CARD REDES SOCIAS*/
.ctn-sm{
    margin-top: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}
.ctn-sm a{list-style: none;  transition: 0.3s;}
.ctn-sm a:hover{transform: scale(1.05);}
 /*----------------------------*/   

/*Descrição Final*/
.foo-descrition{
    width: 40%;
}

/*Copyright*/
.foo-descrition p{
    font-size: 15px;
    margin: 5px 0;
    text-align: center;
    color: var(--subtitle);
}

/*Direcionanto ao Dev*/
#developer {
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: 0.5s;
    display: inline-block; 
}
#developer:hover {text-decoration: underline;}
/************************************/

#canal-d{
 display: flex;
}

.info-operation-mobile{
    display: none;
}

#canal-m{
 display: none;
}

.menu-toggle{display: none;}


/*REPONSIVIDADE MOBILE*/
@media (max-width: 540px){
 
    .info-operation-mobile {display: block;}
    .info-operation {display: none;}

    body {padding: 60px 0 0 0 ;}
    html, body {overflow-x: hidden;}

    .line-text {display: none;}

    .line-text-mobile {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--subtitles-line); 
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    z-index: 2;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
    }
    .line-text-mobile h2 {font-size: 28px;}

    /*Linha a Esquerda*/
    #lf {
        flex: 1;
        border: none;
        width: 200px;
        height: 5px;
        background-color: var(--lines);
        margin-right: 5px;
    }
    /*Linha a Direita*/
    #lr {
        flex: 1;
        border: none;
        width: 200px;
        height: 5px;
        background-color: var(--lines);
        margin-left: 5px
    }

    /* Titulos Principais*/
    .titles {font-size: 38px;}

    /* Botão de Orcamento*/
    .btn-orcamento {
        width: 250px;
        height: 35px;
        font-size: 14px;
    }

    #Icon-WhatsApp {width: 25px;height: auto;}
    /*----------------------------*/

  /*CONTAINER DA BARRA DE NEVEGAÇÃO*/
    .ctn-header {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content:center;
        gap: 46%;
        background: url(../Imgs/Fundos/Fundo-header-mb.png) repeat-x;
    }

    /*Logo da Barra de Navegação*/
    .logo a img {width:140px; height: auto;}

    /*Config da Barra de Navegação*/
    .menu-toggle {display: block;}
    .nav {display: none;}

     /*----------------------------*/   

     /** APRESENTAÇÃO BREVE **/
    .ctn-home {
        width: 100%;
        height: 290px; 
        background:
        url(../Imgs/Waves/Detalhe-Onda.png) bottom no-repeat,
        url(../Imgs/Fundos/bg-princ-mobile.png) center no-repeat;
        background-size: auto 290px, cover;
        background-repeat: no-repeat;
        background-position:bottom,center;
        background-attachment: scroll;
    }

    /*Container da Logo e mensagem*/
    .ctn-contents {margin-top: -40px; gap: 0px;}

    /*Logo*/
    .logo-home img {width: 90px; height: auto;}

    /*Mensagem*/
    #msg-logo {width:100%;font-size: 15px;}
    /************************************/

    /** SERVIÇOS **/
    /*Grid de Serviços*/
    .grid-services-cards {grid-template-columns: repeat(1, 1fr); gap: 16px; }

    /*Card de Serviço*/
    .card-serv {width: 240px; height: 240px;}

    /*Título do Serviço*/
    .title-serv {font-size: 24px;}

    /*Descrição do Serviço*/
    .desc-serv {margin: 0; font-size: 18px;}
    
    /*TAMANHO DOS ICONS*/  
    /*Icone de Espelho*/
    #icon-box { width: 60px; height: 65px;}

    /*Icone de Varanda*/
    #icon-varanda {width: 70px; height: 65px;}

    /*Icone de Espelho*/
    #icon-espelho{ width: 60px; height: 65px;}

    /*Icone de Tampo de Mesa*/
    #icon-tampo {width: 65px; height: 60px;}

    /*Icone do Kit Pia*/
    #icon-kitpia {width: 70px;height: 65px;}

    /*Icone de Janela*/
    #icon-janela {width: 90px;height: auto;}

    /*Icone de Porta*/
    #icon-porta {width: 40px; height: 65px;}

    /*Icone de Pergolado*/
    #icon-pergolado {width: 75px;height: 65px;}
    /*----------------------------*/   

    /*Botão Veja Mais*/
    #see-more {font-size: 26px;}
    /************************************/

    /** DIFERENCIAS **/
    /*Grid para os Cards*/
    .grid-dif {flex-direction: column; gap: 30px;}

    /*Cards*/
    .card-dif {height: 260px;}

    /*Título de Diferencias*/
    .title-dif {font-size: 24px;}

    /*Descrição de Diferencias*/
    .desc-dif {width:92%; font-size: 18px;}

    /*Linha Separadora dos Cards*/
    .sep-dif {display: none;}

    /*NOSSOS NÚMEROS*/
    .section-counter {margin-top: 0px;}

    /*Imagem de Fundo do Contador de Serviços*/
    .bg-counter {
        margin-top: -41px;
        height: 450px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 50px;
        background:  linear-gradient(to bottom, rgba(1, 26, 109, 0.2) 80%, rgba(255, 201, 0, 0.3) 100%) ,url(../Imgs/Fundos/esplanadadf.png)  center;
    }

    .card-counter #eleven {margin-top: 0px;}
    /*Número do contador*/
    .card-counter h2 {font-size: 45px;}

    /*Descrição do contador*/
    .card-counter p {font-size: 30px;}
    /************************************/  
    
    /** CONTATO **/
    /*Titulo de Contato*/
    .section-contact .titles {margin-bottom: 20px;}

    /*Subitulo de Contato*/
    #subtitle-contact {
        font-size: 20px;
        color: var(--subtitle);
        text-align: center;
    }

    /*Posição do Container de Contato*/
    .align-ctn-cont {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 0px; 
    }

    /*Grid de Contato*/
    .grid-contact {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card-contact img {width: 40px; height:auto;}
    
    #icon-email-cont {
        width: 52px;
        margin-bottom: 3px;
        height: auto;
    }

    /*Linhas Separadoras*/
    .sep-line-cont {display: none;}
    
    /*Texto de Contato*/
    .channel-cont {margin-top: 20px; font-size: 17px;}
    .channel-cont-rs{margin-top: 20px; font-size: 17px;}
    /*----------------------------*/

    /*Infomação de funcionamento e pagamento*/
    .info-operation-mobile b {color: var(--subtitle-service); font-size: 19px;}
    .info-operation-mobile {
        flex-direction: column;
        font-size: 18px;
        text-align: center;
    }

    #info-mb {margin-bottom: 0px;}
    
    /*----------------------------*/

    /*Titulo Sobre a Localização*/
    #title-end {
        font-size: 28px;
        color: var(--subtitle-service);
        z-index: 1;
        text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
    }

    /*Localização*/
    #location {margin-top: -40px;z-index: 0;}

    #loc-mob {height: 300px;}

    /*Endereço Completo Descrito*/
    #full-adress {
        margin: 12px 0 ;
        font-size: 13px;
        text-align: center;
    }
    /************************************/

    /** FOOTER **/
    footer {
        width: 100%;
        background: url(../Imgs/Footer/nuvem-mobile.png) center no-repeat;
        background-size: 775px auto;
        height:auto;
    }

    .footer-cont {
        width: 100%;
        height: auto;
        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: none;
        flex-direction: column;
    }
    .footer-info {
        width: 100%;
        flex-direction: column;
        height: auto;
        gap: 0px;
        align-items: flex-start; 
    }

    .card-info-f {
        margin: 0;
        width: 100%;
        height: auto;
        padding: 0 8px;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    #icon-sol {width: 90px;height: auto;}

    .title-footer {font-size: 20px; text-align: left;}

    .card-info-f ul {padding: 10px 0px;}
    .card-info-f li a {justify-content: flex-start;font-size: 16px;}

    .card-info-f p {font-size: 16px;text-align: left;}

    .ctn-sm {gap: 15px;margin-top: 0px;}
    .ctn-sm a img {width: 45px;height: auto;}

    #icon-insta {width: 40px;height: auto;}

    .foo-descrition {width: 100%; text-align: center;}

    .foo-descrition p {font-size: 13px;text-align: center;}

    .p1 {order: 1;}
    .p2 {order: 2;}
    .p3 {order: 3;}

/************************************/
}
/*REPONSIVIDADE 541 até 650*/
@media (min-width: 541px) and (max-width: 650px) {
 
    .info-operation-mobile{display: block;}
    .info-operation{display: none;}

    body {padding: 60px 0 0 0 ;}

    .line-text {display: flex;}
    .line-text h2 {font-family: 22px;}

    .line-text-mobile {display: none;}
    .line-text h2 {font-size: 28px;}

    /*Linha a Esquerda*/
    #lf {
        flex: 1;
        border: none;
        width: 200px;
        height: 5px;
        background-color: var(--lines);
        margin-right: 5px;
    }
    /*Linha a Direita*/
    #lr {
        flex: 1;
        border: none;
        width: 200px;
        height: 5px;
        background-color: var(--lines);
        margin-left: 5px;
        z-index: 5;
    }

    .nav-overlay {top: 60px;}

    /* Titulos Principais*/
    .titles {font-size: 38px;}

    /* Botão de Orcamento*/
    .btn-orcamento {
        width: 265px;
        height: 35px;
        font-size: 16px;
    }

    #Icon-WhatsApp {width: 27px; height: auto;}
    /*----------------------------*/

  /*CONTAINER DA BARRA DE NEVEGAÇÃO*/
    .ctn-header {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content:center;
        gap: 58%;
        background: url(../Imgs/Fundos/Fundo-header-mb.png) repeat-x;
    }

    /*Logo da Barra de Navegação*/
    .logo a img {width:150px;height: auto;}

    /*Config da Barra de Navegação*/
    .menu-toggle {display: block;}
    .nav {display: none;}
     /*----------------------------*/   

     /** APRESENTAÇÃO BREVE **/
    .ctn-home {
        width: 100%;
        height: 290px; 
        background:
        url(../Imgs/Waves/Detalhe-Onda.png) bottom no-repeat,
        url(../Imgs/Fundos/bg-princ-mobile.png) center no-repeat;
        background-size: auto 290px, cover;
        background-repeat: no-repeat;
        background-position:bottom,center;
        background-attachment: scroll;
    }

    /*Container da Logo e mensagem*/
    .ctn-contents {margin-top: -55px; gap: 0px;}

    /*Logo*/
    .logo-home img {width: 100px; height: auto;}

    /*Mensagem*/
    #msg-logo {width: 75%;font-size: 16px;}
    /************************************/

    /** SERVIÇOS **/
    /*Grid de Serviços*/
    .grid-services-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /*Card de Serviço*/
    .card-serv {width: 200px; height: 270px;}

    /*Título do Serviço*/
    .title-serv {font-size: 24px;}

    /*Descrição do Serviço*/
    .desc-serv {margin: 0; font-size: 18px;}
    
    /*TAMANHO DOS ICONS*/  
    /*Icone de Espelho*/
    #icon-box {width: 65px; height: 70px;}

    /*Icone de Varanda*/
    #icon-varanda { width: 75px; height: 70px;}

    /*Icone de Espelho*/
    #icon-espelho {width: 65px; height: 70px;}

    /*Icone de Tampo de Mesa*/
    #icon-tampo {width: 70px; height: 65px;}

    /*Icone do Kit Pia*/
    #icon-kitpia {width: 75px; height: 70px;}

    /*Icone de Janela*/
    #icon-janela {width: 95px;height: auto;}

    /*Icone de Porta*/
    #icon-porta {width: 45px; height: 70px;}

    /*Icone de Pergolado*/
    #icon-pergolado {width: 80px; height: 70px;}
    /*----------------------------*/   

    /*Botão Veja Mais*/
    #see-more {font-size: 26px;}
    /************************************/

    /** DIFERENCIAS **/
    /*Grid para os Cards*/
    .grid-dif {flex-direction: column; gap: 30px;}

    /*Cards*/
    .card-dif {height: 260px;}

    /*Título de Diferencias*/
    .title-dif {font-size: 24px;}

    /*Descrição de Diferencias*/
    .desc-dif { width: 92%;font-size: 18px;}

    /*Linha Separadora dos Cards*/
    .sep-dif{ display: none;}

    /*NOSSOS NÚMEROS*/
    .section-counter {margin-top: 0px;}

    /*Imagem de Fundo do Contador de Serviços*/
    .bg-counter {
        margin-top: -41px;
        height: 450px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 34px;
        background:  linear-gradient(to bottom, rgba(1, 26, 109, 0.2) 80%, rgba(255, 201, 0, 0.3) 100%) ,url(../Imgs/Fundos/esplanadadf.png)  center;
    }

    .card-counter #eleven {margin-top: 0px;}
    /*Número do contador*/
    .card-counter h2 {font-size: 55px;}

    /*Descrição do contador*/
    .card-counter p {font-size: 32px;}
    /************************************/  
    
    /** CONTATO **/
    /*Titulo de Contato*/
    .section-contact .titles {margin-bottom: 20px;}

    /*Subitulo de Contato*/
    #subtitle-contact {
        font-size: 24px;
        color: var(--subtitle);
        text-align: center;
    }

    /*Posição do Container de Contato*/
    .align-ctn-cont {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 0px;
    }

    /*Grid de Contato*/
    .grid-contact {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card-contact {width: 50px; height:auto;}
    #icon-email-cont {
        width: 54px;
        margin-bottom: 3px;
        height: auto;
    }

        /*Linhas Separadoras*/
    .sep-line-cont {display: none;}
    
    /*Texto de Contato*/
    .channel-cont {margin-top: 20px;font-size: 18px;}

    .channel-cont-rs {margin-top: 20px; font-size: 18px;}
    /*----------------------------*/

    /*Infomação de funcionamento e pagamento*/
    .info-operation-mobile b {color: var(--subtitle-service); font-size: 21px;}
    .info-operation-mobile {
        flex-direction: column;
        font-size: 19px;
        text-align: center;
    }
    #info-mb {margin-bottom: 0px;}
    /*----------------------------*/

    /*Titulo Sobre a Localização*/
    #title-end {
        font-size: 28px;
        color: var(--subtitle-service);
        z-index: 1;
        text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
    }

    /*Localização*/
    #location {margin-top: -40px; z-index: 0;}

    #loc-mob {height: 300px;}

    /*Endereço Completo Descrito*/
    #full-adress {
        margin: 12px 0 ;
        font-size: 15px;
        text-align: center;
    }
    /************************************/

    /** FOOTER **/
    footer {
        width: 100%;
        background: url(../Imgs/Footer/nuvem-mobile.png) center no-repeat;
        height:auto;
    }

    .footer-cont {
        width: 100%;
        height: auto;
        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: none;
        flex-direction: column;
    }
    .footer-info {
        width: 100%;
        flex-direction: column;
        height: auto;
        gap: 0px;
        align-items: flex-start; 
    }

    .card-info-f {
        margin: 0;
        width: 100%;
        height: auto;
        padding: 0 8px;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    #icon-sol {width: 90px; height: auto;}

    .title-footer {font-size: 20px;text-align: left;}

    .card-info-f ul {padding: 10px 0px;}
    .card-info-f li a {justify-content: flex-start;font-size: 16px;}

    .card-info-f p {font-size: 16px;text-align: left;}

    .ctn-sm {gap: 15px;margin-top: 0px;}
    .ctn-sm a img {width: 45px;height: auto;}

    #icon-insta{width: 40px;height: auto;}

    .foo-descrition {width: 100%;text-align: center;}

    .foo-descrition p {font-size: 13px;text-align: center;}

    .p1 {order: 1;}
    .p2 {order: 2;}
    .p3 {order: 3;}

/************************************/
}
/*REPONSIVIDADE 651 até 766*/
@media (min-width: 651px) and (max-width: 766px) {
 
    .info-operation-mobile {display: block;}
    .info-operation {display: none;}
    body {padding: 60px 0 0 0 ;}

    .line-text {display: flex;}
    .line-text h2 {font-family: 22px;}

    .line-text-mobile {display: none;}
    .line-text h2 {font-size: 28px;}

    /*Linha a Esquerda*/
    #lf {
        flex: 1;
        border: none;
        width: 200px;
        height: 5px;
        background-color: var(--lines);
        margin-right: 5px;
    }
    /*Linha a Direita*/
    #lr {
        flex: 1;
        border: none;
        width: 200px;
        height: 5px;
        background-color: var(--lines);
        margin-left: 5px;
    }

    .nav-overlay {top: 60px;}

    /* Titulos Principais*/
    .titles {font-size: 38px;}

    /* Botão de Orcamento*/
    .btn-orcamento {
        width: 265px;
        height: 35px;
        font-size: 16px;
    }

    #Icon-WhatsApp {width: 27px;height: auto;}
    /*----------------------------*/

  /*CONTAINER DA BARRA DE NEVEGAÇÃO*/
    .ctn-header {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content:center;
        gap: 58%;
        background: url(../Imgs/Fundos/Fundo-header-mb.png) repeat-x;
    }

    
    .logo a img {width:150px;height: auto;}

    /*Config da Barra de Navegação*/
    .menu-toggle {display: block;}
    .nav {display: none;}
     /*----------------------------*/   

     /** APRESENTAÇÃO BREVE **/
    .ctn-home {
        width: 100%;
        height: 290px; 
        background:
        url(../Imgs/Waves/Detalhe-Onda.png) bottom no-repeat,
        url(../Imgs/Fundos/bg-princ-mobile.png) center no-repeat;
        background-size: auto 350px, cover;
        background-repeat: no-repeat;
        background-position:bottom,center;
        background-attachment: scroll;
    }

    /*Container da Logo e mensagem*/
    .ctn-contents {margin-top: -55px; gap: 0px;}

    /*Logo*/
    .logo-home img {width: 100px; height: auto;}

    /*Mensagem*/
    #msg-logo {width: 75%;font-size: 16px;}
    /************************************/

    /** SERVIÇOS **/
    /*Grid de Serviços*/
    .grid-services-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /*Card de Serviço*/
    .card-serv {width: 260px; height: 250px;}

    /*Título do Serviço*/
    .title-serv {font-size: 24px;}

    /*Descrição do Serviço*/
    .desc-serv {margin: 0; font-size: 18px;}
    
    /*TAMANHO DOS ICONS*/  
    /*Icone de Espelho*/
    #icon-box {width: 65px; height: 70px;}

    /*Icone de Varanda*/
    #icon-varanda {width: 75px; height: 70px;}

    /*Icone de Espelho*/
    #icon-espelho {width: 65px; height: 70px;}

    /*Icone de Tampo de Mesa*/
    #icon-tampo {width: 70px; height: 65px;}

    /*Icone do Kit Pia*/
    #icon-kitpia {width: 75px; height: 70px;}

    /*Icone de Janela*/
    #icon-janela {width: 95px; height: auto;}

    /*Icone de Porta*/
    #icon-porta {width: 45px; height: 70px;}

    /*Icone de Pergolado*/
    #icon-pergolado {width: 80px; height: 70px;}
    /*----------------------------*/   

    /*Botão Veja Mais*/
    #see-more {font-size: 26px;}
    /************************************/

    /** DIFERENCIAS **/
    /*Grid para os Cards*/
    .grid-dif {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /*Cards*/
    .card-dif {width: 320px;height: 260px;}

    /*Título de Diferencias*/
    .title-dif {font-size: 24px;}

    /*Descrição de Diferencias*/
    .desc-dif {font-size: 18px;}

    /*Linha Separadora dos Cards*/
    .sep-dif {display: none;}

    /*NOSSOS NÚMEROS*/
    .section-counter {margin-top: 0px;}

    /*Imagem de Fundo do Contador de Serviços*/
    .bg-counter {
        margin-top: -41px;
        height: 450px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 30px;
        background:  linear-gradient(to bottom, rgba(1, 26, 109, 0.2) 80%, rgba(255, 201, 0, 0.3) 100%) ,url(../Imgs/Fundos/esplanadadf.png)  center;
    }

    .card-counter #eleven {margin-top: 0px;}
    /*Número do contador*/
    .card-counter h2 {font-size: 55px;}

    /*Descrição do contador*/
    .card-counter p {font-size: 32px;}
    /************************************/  
    
    /** CONTATO **/

    /*Titulo de Contato*/
    .section-contact .titles {margin-bottom: 20px;}

    /*Subitulo de Contato*/
    #subtitle-contact{
        font-size: 26px;
        color: var(--subtitle);
        text-align: center;
    }

    /*Posição do Container de Contato*/
    .align-ctn-cont {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 0px;
    }

    /*Grid de Contato*/
    .grid-contact {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card-contact img {width: 50px; height:auto;}
    #icon-email-cont {
        width: 54px;
        margin-bottom: 3px;
        height: auto;
    }

    /*Linhas Separadoras*/
    .sep-line-cont {display: none;}
    
    /*Texto de Contato*/
    .channel-cont{margin-top: 20px; font-size: 18px;}

    .channel-cont-rs{margin-top: 20px;font-size: 18px;}
    /*----------------------------*/

    /*Infomação de funcionamento e pagamento*/
    .info-operation-mobile b {color: var(--subtitle-service);font-size: 21px;}
    .info-operation-mobile {
        flex-direction: column;
        font-size: 19px;
        text-align: center;
    }

    #info-mb {margin-bottom: 0px;}
    /*----------------------------*/

    /*Titulo Sobre a Localização*/
    #title-end {
        font-size: 28px;
        color: var(--subtitle-service);
        z-index: 1;
        text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
    }

    /*Localização*/
    #location {margin-top: -40px; z-index: 0;}

    #loc-mob {height: 300px;}

    /*Endereço Completo Descrito*/
    #full-adress {
        margin: 12px 0 ;
        font-size: 15px;
        text-align: center;
    }
    /************************************/

    /** FOOTER **/
    footer {
        width: 100%;
        background: url(../Imgs/Footer/nuvem-mobile.png) center no-repeat;
        height:auto;
    }

    .footer-cont {
        width: 100%;
        height: auto;
        margin-top: 20px;
        display: flex;
        justify-content: center;
        align-items: none;
        flex-direction: column;
    }
    .footer-info {
        width: 100%;
        flex-direction: column;
        height: auto;
        gap: 0px;
        align-items: flex-start; 
    }

    .card-info-f {
        margin: 0;
        width: 100%;
        height: auto;
        padding: 0 8px;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    #icon-sol {width: 90px;height: auto;}

    .title-footer {font-size: 20px; text-align: left;}

    .card-info-f ul {padding: 10px 0px;}

    .card-info-f li a {justify-content: flex-start;font-size: 16px;}

    .card-info-f p {font-size: 16px; text-align: left;}

    .ctn-sm {gap: 15px; margin-top: 0px;}
    
    .ctn-sm a img {width: 45px; height: auto;}

    #icon-insta {width: 40px;height: auto;}

    .foo-descrition {width: 100%; text-align: center;}

    .foo-descrition p {font-size: 13px; text-align: center;}

    .p1 {order: 1;}
    .p2 {order: 2;}
    .p3 {order: 3;}

/************************************/
}
/*REPONSIVIDADE TABLET*/
@media (min-width: 767px) and (max-width: 900px) {

    body {padding: 90px 0 0 0 ;}
    
    /* Menu mobile*/
    .nav-mobile {top: 90px;}

    /* Lista dentro do menu */
    .nav-mobile ul {
        text-align: center;
        display: flex;
        flex-direction: column;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-mobile li a {
        color: white;
        text-decoration: none;
        padding: 13px 15px;
        display: block;
        font-size: 20px;
    }

    .nav-mobile li a:hover {color: #ffc800;}

    /* Botão mobile */
    .menu-toggle {font-size: 32px;}

    .nav-overlay {top: 90px; height: calc(100% - 90px); }

    /*CONTAINER DA BARRA DE NEVEGAÇÃO*/
    .ctn-header {justify-content:space-evenly; gap: 50%;}

      /*CONTAINER DA BARRA DE NEVEGAÇÃO*/
    .ctn-header {
        width: 100%;
        height: 90px;
        display: flex;
        justify-content: space-evenly;
        gap: 50%;
        background: url(../Imgs/Fundos/Fundo-header.png) bottom repeat-x;
    }

    /*Logo da Barra de Navegação*/
    .logo a img {width:260px; height: auto;}

    /*Opções da Barra de Navegação*/
    .menu-toggle {display: block;}
    .nav {display: none;}

    /** APRESENTAÇÃO BREVE **/
    .ctn-home {
        width: 100%;
        height: 550px;
        display: flex;
        justify-content: center;
        align-items: center; 
        background: url(../Imgs/Waves/Detalhe-Onda.png) bottom no-repeat, url(../Imgs/Fundos/bg-princ.png) center;
        background-size: auto 550px, cover;
    }

    /*Container da Logo e mensagem*/
    .ctn-contents {
        width: 100%;
        margin-top: -110px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 20px;
    }

    /*Logo*/
    .logo-home img {width: 150px;}

    /*Mensagem*/
    #msg-logo {width:100%; font-size: 30px;}
    /************************************/

    /** SERVIÇOS **/

    /*Grid de Serviços*/
    .grid-services-cards {grid-template-columns: repeat(2, 1fr); gap: 50px;}

    /*Card de Serviço*/
    .card-serv {width: 280px; height: 250px;}

    /*Título do Serviço*/
    .title-serv {font-size: 24px;}

    /*Descrição do Serviço*/
    .desc-serv {margin: 0; font-size: 18px;}
    
    /*TAMANHO DOS ICONS*/  
    /*Icone de Espelho*/
    #icon-box {width: 70px;height: 80px;}

    /*Icone de Varanda*/
    #icon-varanda {width: 80px;height: 80px;}

    /*Icone de Espelho*/
    #icon-espelho {width: 72px;height:80px;}

    /*Icone de Tampo de Mesa*/
    #icon-tampo {width: 72px;height: 70px;}

    /*Icone do Kit Pia*/
    #icon-kitpia {width: 85px;height: 80px;}

    /*Icone de Janela*/
    #icon-janela {width: 105px; height: auto;}

    /*Icone de Porta*/
    #icon-porta {width: 50px; height: 80px;}

    /*Icone de Pergolado*/
    #icon-pergolado{width: 85px; height: 80px;}
    /*----------------------------*/     

    /*Botão Veja Mais*/
    #btn-link-see {margin-top: 30px;}
    #see-more {font-size: 35px;}
    /************************************/

    /** DIFERENCIAS **/
    /*Grid para os Cards*/
    .grid-dif {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 35px;
    }

    /*Cards*/
    .card-dif {height: 260px;}

    /*Título de Diferencias*/
    .title-dif {font-size: 24px;}

    /*Descrição de Diferencias*/
    .desc-dif {font-size: 18px;}

    /*Linha Separadora dos Cards*/
    .sep-dif {display: none;}

    /*NOSSOS NÚMEROS*/
    .section-counter {margin-top: 0px;}

    /*Imagem de Fundo do Contador de Serviços*/
    .bg-counter {
        margin-top: -58px;
        height: 560px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 50px;
        background:  linear-gradient(to bottom, rgba(1, 26, 109, 0.2) 80%, rgba(255, 201, 0, 0.3) 100%) ,url(../Imgs/Fundos/esplanadadf.png)  center;
    }

    .card-counter #eleven {margin-top: 0px;}

    /*Número do contador*/
    .card-counter h2 {font-size: 60px;}

    /*Descrição do contador*/
    .card-counter p {font-size: 45px;}
    /************************************/  
   
    /** CONTATO **/
    /*Titulo de Contato*/
    .section-contact .titles {margin-bottom: 0px;}

    /*Subitulo de Contato*/
    #subtitle-contact {
        font-size:35px;
        margin-bottom: 0;
        color: var(--subtitle);
        text-align: center;
    }

    /*Posição do Container de Contato*/
    .align-ctn-cont {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        justify-content: center;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 0px;
    }

    /*Grid de Contato*/
    .grid-contact {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card-contact img {width: 70px;height:auto;}
    #icon-email-cont {
        width: 88px;
        margin-bottom: 3px;
        height: auto;
    }

    /*Linhas Separadoras*/
    .sep-line-cont {display: none;}
    
    /*Texto de Contato*/
    .channel-cont {margin-top: 20px; font-size: 19px;}

    .channel-cont-rs {margin-top: 20px; font-size: 19px;}
    /*----------------------------*/

    /*Infomação de funcionamento e pagamento*/
    .info-operation {
        flex-direction: column;
        margin: 10px 0 15px 0;
        font-size: 23px;
        text-align: center;
    }
    /*----------------------------*/

    /* Localização*/
    #location {margin-top: -60px; z-index: 0;}

    #loc-mob {height: 450px;}

    /*Endereço Completo Descrito*/
    #full-adress {
        margin: 12px 0 ;
        font-size: 20px;
        text-align: center;
        color: var(--subtitle);
    }
    /************************************/
 
    /** FOOTER **/
    footer {
        width: 100%;
        background: url(../Imgs/Footer/nuvem-tablet.png) center no-repeat;
        height:420px;
        border-top: 5px solid var(--lines);
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .footer-info {width: 100%;}

    /*Card Footer*/
    .card-info-f {width: 100%;}

    /*CARD CONTATO*/
    .card-info-f ul {padding: 0 0 0 60px;}

    /*----------------------------*/

    /*CARD AGREDECIMENTO NH*/
    .card-info-f p {font-size: 18px;}    
    /*----------------------------*/   
    
    /*Descrição Final*/
    .foo-descrition {width: 70%;}

    /*Copyright*/
    .foo-descrition p {font-size: 18px;}
/************************************/
}
/*REPONSIVIDADE 901 até 1023*/
@media (min-width: 901px) and (max-width: 1023px) {

    body {padding: 90px 0 0 0 ;}
    
    /* Menu mobile*/
    .nav-mobile {top: 90px;}

    /* Lista dentro do menu */
    .nav-mobile ul {
        text-align: center;
        display: flex;
        flex-direction: column;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav-mobile li a {
        color: white;
        text-decoration: none;
        padding: 13px 15px;
        display: block;
        font-size: 20px;
    }

    .nav-mobile li a:hover {color: #ffc800;}

    /* Botão mobile */
    .menu-toggle {font-size: 32px;}

    .nav-overlay {top: 90px; height: calc(100% - 90px); }

    /*CONTAINER DA BARRA DE NEVEGAÇÃO*/
    .ctn-header {justify-content:space-evenly;gap: 50%;}

      /*CONTAINER DA BARRA DE NEVEGAÇÃO*/
    .ctn-header {
        width: 100%;
        height: 90px;
        display: flex;
        justify-content: space-evenly;
        gap: 50%;
        background: url(../Imgs/Fundos/Fundo-header.png) bottom repeat-x;
    }

    /*Logo da Barra de Navegação*/
    .logo a img {width:260px; height: auto;}

    /*Config da Barra de Navegação*/
    .menu-toggle {display: block;}
    .nav {display: none;}

    /** APRESENTAÇÃO BREVE **/
    .ctn-home {
        width: 100%;
        height: 550px;
        display: flex;
        justify-content: center;
        align-items: center; 
        background: url(../Imgs/Waves/Detalhe-Onda.png) bottom no-repeat, url(../Imgs/Fundos/bg-princ.png) center;
        background-size: auto 500px, cover;
        
    }

    /*Container da Logo e mensagem*/
    .ctn-contents {
        width: 100%;
        margin-top: -110px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 20px;
    }

    /*Logo*/
    .logo-home img {width: 150px;}

    /*Mensagem*/
    #msg-logo {width:90%; font-size: 30px;}
    /************************************/

    /** SERVIÇOS **/

    /*Grid de Serviços*/
    .grid-services-cards {grid-template-columns: repeat(2, 1fr); gap: 30px;}

    /*Card de Serviço*/
    .card-serv {width: 370px; height: 220px;}

    /*Título do Serviço*/
    .title-serv {font-size: 24px;}

    /*Descrição do Serviço*/
    .desc-serv {margin: 0; font-size: 18px;}
    
    /*TAMANHO DOS ICONS*/  
    /*Icone de Espelho*/
    #icon-box {width: 70px; height: 80px;}

    /*Icone de Varanda*/
    #icon-varanda {width: 80px; height: 80px;}

    /*Icone de Espelho*/
    #icon-espelho {width: 72px; height:80px;}

    /*Icone de Tampo de Mesa*/
    #icon-tampo {width: 72px; height: 70px;}

    /*Icone do Kit Pia*/
    #icon-kitpia {width: 85px; height: 80px;}

    /*Icone de Janela*/
    #icon-janela {width: 105px; height: auto;}

    /*Icone de Porta*/
    #icon-porta {width: 50px; height: 80px;}

    /*Icone de Pergolado*/
    #icon-pergolado {width: 85px; height: 80px;}
    /*----------------------------*/     

    /*Botão Veja Mais*/
    #btn-link-see {margin-top: 30px;}
    #see-more {font-size: 35px;}
    /************************************/

    /** DIFERENCIAS **/
    /*Grid para os Cards*/
    .grid-dif {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 35px;
    }

    /*Cards*/
    .card-dif {width: 400px; height: 260px;}

    /*Título de Diferencias*/
    .title-dif {font-size: 24px;}

    /*Descrição de Diferencias*/
    .desc-dif {font-size: 18px;}

    /*Linha Separadora dos Cards*/
    .sep-dif { display: none;}

    /*NOSSOS NÚMEROS*/
    .section-counter {margin-top: 0px;}

    /*Imagem de Fundo do Contador de Serviços*/
    .bg-counter {
        margin-top: -58px;
        height: 560px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 50px;
        background:  linear-gradient(to bottom, rgba(1, 26, 109, 0.2) 80%, rgba(255, 201, 0, 0.3) 100%) ,url(../Imgs/Fundos/esplanadadf.png)  center;
    }

    .card-counter #eleven {margin-top: 0px;}

    /*Número do contador*/
    .card-counter h2 {font-size: 60px;}

    /*Descrição do contador*/
    .card-counter p {font-size: 45px;}
    /************************************/  
   
    /** CONTATO **/
    /*Titulo de Contato*/
    .section-contact .titles {margin-bottom: 0px;}

    /*Subitulo de Contato*/
    #subtitle-contact {
        font-size:35px;
        margin-bottom: 0;
        color: var(--subtitle);
        text-align: center;
    }

    /*Posição do Container de Contato*/
    .align-ctn-cont {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        justify-content: center;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 0px;
    }

    /*Grid de Contato*/
    .grid-contact {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card-contact img {width: 70px; height:auto;}

    #icon-email-cont {
        width: 88px;
        margin-bottom: 3px;
        height: auto;
    }

    /*Linhas Separadoras*/
    .sep-line-cont {display: none;}
    
    /*Texto de Contato*/
    .channel-cont {margin-top: 20px; font-size: 19px;}

    .channel-cont-rs {margin-top: 20px; font-size: 19px;}
    /*----------------------------*/

    /*Infomação de funcionamento e pagamento*/
    .info-operation {
        flex-direction: column;
        margin: 10px 0 15px 0;
        font-size: 23px;
        text-align: center;
    }
    /*----------------------------*/

    /* Localização*/
    #location {margin-top: -60px; z-index: 0;}
    #loc-mob {height: 450px;}

    /*Endereço Completo Descrito*/
    #full-adress{
        margin: 12px 0 ;
        font-size: 20px;
        text-align: center;
    }
    /************************************/
 
    /** FOOTER **/
    footer {
        width: 100%;
        background: url(../Imgs/Footer/nuvem-tablet.png) center no-repeat;
        height:420px;
        border-top: 5px solid var(--lines);
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .footer-info {width: 100%;}

    /*Card Footer*/
    .card-info-f {width: 100%;}

    /*CARD CONTATO*/
    .card-info-f ul {padding: 0 0 0 60px;}

    /*----------------------------*/
    /*CARD AGREDECIMENTO NH*/
    .card-info-f p {font-size: 18px}    
    /*----------------------------*/   
    
    /*Descrição Final*/
    .foo-descrition {width: 70%;}

    /*Copyright*/
    .foo-descrition p {font-size: 18px;}
    /************************************/
}
/*REPONSIVIDADE TABLET DEITADO*/
@media (min-width: 1024px) and (max-width: 1250px) {

    body {padding: 100px 0 0 0 ;}
    
    /* Menu mobile*/
    .nav-mobile {top: 100px;}

    .nav-mobile li a {padding: 13px 15px; font-size: 20px;}

    .nav-mobile li a:hover {color: #ffc800;}

    /* Botão mobile */
    .menu-toggle {font-size: 32px;}

    .nav-overlay {top: 100px; height: calc(100% - 100px);}

    /*CONTAINER DA BARRA DE NEVEGAÇÃO*/
    .ctn-header {
        height: 100px;
        justify-content: space-evenly;
        gap: 65%;
        background: url(../Imgs/Fundos/Fundo-header.png) bottom repeat-x;
    }

    /*Logo da Barra de Navegação*/
    .logo a img {width:240px; height: auto;}

    /*Config da Barra de Navegação*/
    .menu-toggle {display: block;}
    .nav {display: none;}


    /** APRESENTAÇÃO BREVE **/
    .ctn-home {
        width: 100%;
        height: 550px;
        display: flex;
        justify-content: center;
        align-items: center; 
        background: url(../Imgs/Waves/Detalhe-Onda.png) bottom no-repeat, url(../Imgs/Fundos/bg-princ.png) center;
        background-size: auto 500px, cover;
        
    }

    /*Container da Logo e mensagem*/
    .ctn-contents {
        width: 100%;
        margin-top: -110px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 20px;
    }

    /*Logo*/
    .logo-home img {width: 140px;}

    /*Mensagem*/
    #msg-logo {width:90%; font-size: 30px;}
    /************************************/

    /** SERVIÇOS **/
    /*Grid de Serviços*/
    .grid-services-cards {grid-template-columns: repeat(2, 1fr); gap:20px;}

    /*Card de Serviço*/
    .card-serv {width: 410px; height: 210px;}

    /*Título do Serviço*/
    .title-serv {font-size: 24px;}

    /*Descrição do Serviço*/
    .desc-serv {margin: 0; font-size: 18px;}
    
    /*TAMANHO DOS ICONS*/  
    /*Icone de Espelho*/
    #icon-box {width: 60px; height: 60px;}

    /*Icone de Varanda*/
    #icon-varanda {width: 65px; height: 60px;}

    /*Icone de Espelho*/
    #icon-espelho {width: 55px; height:60px;}

    /*Icone de Tampo de Mesa*/
    #icon-tampo {width: 65px; height: 58px;}

    /*Icone do Kit Pia*/
    #icon-kitpia {width: 75px; height: 60px;}

    /*Icone de Janela*/
    #icon-janela {width: 85px; height: auto;}

    /*Icone de Porta*/
    #icon-porta {width: 42px; height: 60px;}

    /*Icone de Pergolado*/
    #icon-pergolado {width: 75px; height: 60px;}
    /*----------------------------*/     

    /*Botão Veja Mais*/
    #btn-link-see {margin-top: 30px;}
    #see-more {font-size: 35px;}
    /************************************/

    /** DIFERENCIAS **/
    /*Grid para os Cards*/
    .grid-dif {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 35px;
    }

    /*Cards*/
    .card-dif {height: 260px; margin: 0 55px;}

    /*Título de Diferencias*/
    .title-dif {font-size: 24px;}

    /*Descrição de Diferencias*/
    .desc-dif {font-size: 18px;}

    /*Linha Separadora dos Cards*/
    .sep-dif {display: none;}

    /*NOSSOS NÚMEROS*/
    .section-counter {margin-top: 0px; align-items: center;}

    /*Imagem de Fundo do Contador de Serviços*/
    .bg-counter {
        margin-top: -58px;
        height: 500px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
        background:  linear-gradient(to bottom, rgba(1, 26, 109, 0.2) 80%, rgba(255, 201, 0, 0.3) 100%) ,url(../Imgs/Fundos/esplanadadf.png)  center;
    }

    .card-counter #eleven {margin-top: 0px;}

    /*Número do contador*/
    .card-counter h2 {font-size: 55px;}

    /*Descrição do contador*/
    .card-counter p {font-size: 40px; margin-bottom: 10px;}
    /************************************/  
   
    /** CONTATO **/
    /*Titulo de Contato*/
    .section-contact .titles {margin-bottom: 0px;}

    /*Subitulo de Contato*/
    #subtitle-contact {
        font-size: 32px;
        margin-bottom: 0;
        color: var(--subtitle);
        text-align: center;
    }

    /*Posição do Container de Contato*/
    .align-ctn-cont {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        justify-content: center;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 0px;
    }

    /*Grid de Contato*/
    .grid-contact {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card-contact img {width: 65px; height:auto;}

    #icon-email-cont {
        width: 83px;
        margin-bottom: 3px;
        height: auto;
    }

    /*Linhas Separadoras*/
    .sep-line-cont {display: none;}
    
    /*Texto de Contato*/
    .channel-cont {margin-top: 20px;  font-size: 20px;}

    .channel-cont-rs {margin-top: 20px; font-size: 20px;}
    /*----------------------------*/

    /*Infomação de funcionamento e pagamento*/
    .info-operation {
        flex-direction: column;
        margin: 10px 0 15px 0;
        font-size: 25px;
        text-align: center;
    }
    /*----------------------------*/

    /* Localização*/
    #location {margin-top: -60px; z-index: 0;}

    #loc-mob {height: 470px;}

    /*Endereço Completo Descrito*/
    #full-adress {
        margin: 12px 0 ;
        font-size: 20px;
        text-align: center;
    }
    /************************************/
 
    /** FOOTER **/
    footer {
        width: 100%;
        background: url(../Imgs/Footer/nuvem-1024x.png) center no-repeat;
        height:420px;
        border-top: 5px solid var(--lines);
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .footer-info {width: 100%;}

    /*Card Footer*/
    .card-info-f {width: 100%;}

    /*CARD CONTATO*/
    .card-info-f ul {padding: 0 0 0 90px;}

    /*CARD AGREDECIMENTO NH*/
    .card-info-f p {font-size: 18px;}    
    /*----------------------------*/   
    
    /*Descrição Final*/
    .foo-descrition {width: 70%;}

    /*Copyright*/
    .foo-descrition p {font-size: 18px;}

    /************************************/
}
/*REPONSIVIDADE 1251 té 1279*/
@media (min-width: 1251px) and (max-width: 1279px) {
    
    body {padding: 110px 0 0 0 ;}
    html, body {overflow-x: hidden;}
    
    /*CONTAINER DA BARRA DE NEVEGAÇÃO*/
    .ctn-header {
        width: 100%;
        height: 110px;
        display: flex;
        justify-content: space-evenly;
        gap: 45%;
        background: url(../Imgs/Fundos/Fundo-header.png) bottom repeat-x;
    }

    /*Logo da Barra de Navegação*/
    .logo a img {width:280px; height: auto;}

    /*Config da Barra de Navegação*/
    .nav {display: block;}
    .menu-toggle {display: none;}
    .nav-mobile.active{display: none;}
    .nav-overlay {display: none;}

    .nav li a {font-size: 20px;}

    /** APRESENTAÇÃO BREVE **/
    .ctn-home {
        width: 100%;
        height: 550px;
        display: flex;
        justify-content: center;
        align-items: center; 
        background: url(../Imgs/Waves/Detalhe-Onda.png) bottom no-repeat, url(../Imgs/Fundos/bg-princ.png) center;  
        background-size: auto 390px, cover;
    }

    /*Container da Logo e mensagem*/
    .ctn-contents {
        width: 100%;
        margin-top: -90px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 20px;
    }

    /*Logo*/
    .logo-home img{width: 160px;}

    /*Mensagem*/
    #msg-logo {width:70%; font-size: 30px;}
    /************************************/

    /** SERVIÇOS **/
    /*Grid de Serviços*/
    .grid-services-cards {grid-template-columns: repeat(4, 1fr); gap: 25px;}

    /*Card de Serviço*/
    .card-serv {width: 240px; height: 240px;}

    /*Título do Serviço*/
    .title-serv {font-size: 24px;}

    /*Descrição do Serviço*/
    .desc-serv {margin: 0;font-size: 18px;}
    
    /*TAMANHO DOS ICONS*/  
    /*Icone de Espelho*/
    #icon-box {width: 60px; height: 60px;}

    /*Icone de Varanda*/
    #icon-varanda {width: 65px; height: 60px;}

    /*Icone de Espelho*/
    #icon-espelho {width: 55px; height:60px;}

    /*Icone de Tampo de Mesa*/
    #icon-tampo {width: 65px;height: 58px;}

    /*Icone do Kit Pia*/
    #icon-kitpia {width: 75px;height: 60px;}

    /*Icone de Janela*/
    #icon-janela {width: 85px; height: auto;}

    /*Icone de Porta*/
    #icon-porta {width: 42px; height: 60px;}

    /*Icone de Pergolado*/
    #icon-pergolado {width: 75px; height: 60px;}
    /*----------------------------*/     

    /*Botão Veja Mais*/
    #btn-link-see {margin-top: 30px;}
    #see-more {font-size: 26px;}
    /************************************/

    /** DIFERENCIAS **/
    /*Grid para os Cards*/
    .grid-dif {
        display:flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    /*Cards*/
    .card-dif {width: 300px; height: 260px;}

    /*Título de Diferencias*/
    .title-dif {font-size: 24px;}

    /*Descrição de Diferencias*/
    .desc-dif {font-size: 18px;}

    /*Linha Separadora dos Cards*/
    .sep-dif {
        width: 5px;
        height: 230px;
        background: var(--lines);
    }

    /*NOSSOS NÚMEROS*/
    .section-counter {margin-top: 0px; align-items: center;}

    /*Imagem de Fundo do Contador de Serviços*/
    .bg-counter {
        margin-top: -58px;
        height: 500px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        gap: 8%;
        background:  linear-gradient(to bottom, rgba(1, 26, 109, 0.2) 80%, rgba(255, 201, 0, 0.3) 100%) ,url(../Imgs/Fundos/esplanadadf.png)  center;
    }

     .card-counter #eleven {margin-top: 0px;}

    /*Número do contador*/
    .card-counter h2{font-size: 90px;}

    /*Descrição do contador*/
    .card-counter p{font-size: 30px;}
    /************************************/  
   
    /** CONTATO **/
    /*Titulo de Contato*/
    .section-contact .titles {margin-bottom: 0px;}

    /*Subitulo de Contato*/
    #subtitle-contact {
        font-size:32px;
        margin-bottom: 0;
        color: var(--subtitle);
        text-align: center;
    }

    /*Posição do Container de Contato*/
    .align-ctn-cont {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin-bottom: 25px;
    }

    /*Grid de Contato*/
    .grid-contact {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card-contact img{width: 72px; height:auto;}
    #icon-email-cont {
        width: 92px;
        margin-bottom: 3px;
        height: auto;
    }

    /*Linhas Separadoras*/
    .sep-line-cont {display: block;}
    
    /*Texto de Contato*/
    .channel-cont {margin-top: 20px; font-size: 20px;}

    .channel-cont-rs {margin-top: 20px; font-size: 20px;}
    /*----------------------------*/

    /*Infomação de funcionamento e pagamento*/
    .info-operation {
        flex-direction: column;
        margin: 10px 0 15px 0;
        font-size: 27px;
        text-align: center;
    }
    /*----------------------------*/

    /* Localização*/
    #location {margin-top: -60px; z-index: 0;}
    #loc-mob {height: 470px;}

    /*Endereço Completo Descrito*/
    #full-adress {
        margin: 12px 0 ;
        font-size: 18px;
        text-align: center;
    }
    /************************************/
 
    /** FOOTER **/
    footer {
        width: 100%;
        background: url(../Imgs/Footer/nuvem-1280x.png) center no-repeat;
        height:420px;
        border-top: 5px solid var(--lines);
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .footer-info {width: 80%;}

    /*Card Footer*/
    .card-info-f {width: 100%;}

    /*CARD CONTATO*/
    .card-info-f ul {padding: 0 0 0 90px;}

    /*CARD AGREDECIMENTO NH*/
    .card-info-f p {font-size: 18px;}    
    /*----------------------------*/   
    
    /*Descrição Final*/
    .foo-descrition {width: 50%;}

    /*Copyright*/
    .foo-descrition p{font-size: 18px;}
    /************************************/
}
/*REPONSIVIDADE NOOTEBOOK*/
@media (min-width: 1280px) and (max-width: 1599px) {

    body {padding: 110px 0 0 0 ;}
    html, body {overflow-x: hidden;}
    
      /*CONTAINER DA BARRA DE NEVEGAÇÃO*/
    .ctn-header {
        width: 100%;
        height: 110px;
        display: flex;
        justify-content: space-evenly;
        gap: 45%;
        background: url(../Imgs/Fundos/Fundo-header.png) bottom repeat-x;
    }

    /*Logo da Barra de Navegação*/
    .logo a img{width:280px; height: auto;}

    .nav {display: block;}
    .menu-toggle {display: none;}
    .nav-mobile.active{display: none;}
    .nav-overlay {display: none;}

    .nav li a {font-size: 20px;}

    /** APRESENTAÇÃO BREVE **/
    .ctn-home {
        width: 100%;
        height: 550px;
        display: flex;
        justify-content: center;
        align-items: center; 
        background: url(../Imgs/Waves/Detalhe-Onda.png) bottom no-repeat, url(../Imgs/Fundos/bg-princ.png) center;
        background-size: auto 450px, cover;
        
    }

    /*Container da Logo e mensagem*/
    .ctn-contents {
        width: 100%;
        margin-top: -90px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 20px;
    }

    /*Logo*/
    .logo-home img{width: 160px;}

    /*Mensagem*/
    #msg-logo {width:70%; font-size: 30px;}
    /************************************/

    /** SERVIÇOS **/
    /*Grid de Serviços*/
    .grid-services-cards {grid-template-columns: repeat(4, 1fr); gap: 25px;}

    /*Card de Serviço*/
    .card-serv {width: 240px; height: 240px;}

    /*Título do Serviço*/
    .title-serv {font-size: 24px;}

    /*Descrição do Serviço*/
    .desc-serv {margin: 0;font-size: 18px;}
    
    /*TAMANHO DOS ICONS*/  
    /*Icone de Espelho*/
    #icon-box {width: 60px; height: 60px;}

    /*Icone de Varanda*/
    #icon-varanda {width: 65px; height: 60px;}

    /*Icone de Espelho*/
    #icon-espelho {width: 55px; height:60px;}

    /*Icone de Tampo de Mesa*/
    #icon-tampo {width: 65px; height: 58px;}

    /*Icone do Kit Pia*/
    #icon-kitpia {width: 75px; height: 60px;}

    /*Icone de Janela*/
    #icon-janela {width: 85px; height: auto;}

    /*Icone de Porta*/
    #icon-porta {width: 42px; height: 60px;}

    /*Icone de Pergolado*/
    #icon-pergolado {width: 75px; height: 60px;}
    /*----------------------------*/     

    /*Botão Veja Mais*/
    #btn-link-see {margin-top: 30px;}
    #see-more {font-size: 26px;}
    /************************************/

    /** DIFERENCIAS **/
    /*Grid para os Cards*/
    .grid-dif{
        display:flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    /*Cards*/
    .card-dif {width: 300px;height: 260px;}

    /*Título de Diferencias*/
    .title-dif {font-size: 24px;}

    /*Descrição de Diferencias*/
    .desc-dif {font-size: 18px;}

    /*Linha Separadora dos Cards*/
    .sep-dif {
        width: 5px;
        height: 230px;
        background: var(--lines);
    }

    /*NOSSOS NÚMEROS*/
    .section-counter {
        margin-top: 0px;
        align-items: center;
    }

    /*Imagem de Fundo do Contador de Serviços*/
    .bg-counter{
        margin-top: -58px;
        height: 500px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        gap: 8%;
        background:  linear-gradient(to bottom, rgba(1, 26, 109, 0.2) 80%, rgba(255, 201, 0, 0.3) 100%) ,url(../Imgs/Fundos/esplanadadf.png)  center;
    }

     .card-counter #eleven{margin-top: 0px;}

    /*Número do contador*/
    .card-counter h2{font-size: 95px;}

    /*Descrição do contador*/
    .card-counter p{font-size: 30px;}
    /************************************/  
   
    /** CONTATO **/
    /*Titulo de Contato*/
    .section-contact .titles {margin-bottom: 0px;}

    /*Subitulo de Contato*/
    #subtitle-contact {
        font-size:32px;
        margin-bottom: 0;
        color: var(--subtitle);
        text-align: center;
    }

    /*Posição do Container de Contato*/
    .align-ctn-cont {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin-bottom: 25px;
    }

    /*Grid de Contato*/
    .grid-contact {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card-contact img {width: 72px;height:auto;}

    #icon-email-cont {
        width: 92px;
        margin-bottom: 3px;
        height: auto;
    }

    /*Linhas Separadoras*/
    .sep-line-cont {display: block;}
    
    /*Texto de Contato*/
    .channel-cont {margin-top: 20px;font-size: 20px;}

    .channel-cont-rs {margin-top: 20px;font-size: 20px;}
    /*----------------------------*/

    /*Infomação de funcionamento e pagamento*/
    .info-operation {
        flex-direction: column;
        margin: 10px 0 15px 0;
        font-size: 27px;
        text-align: center;
    }
    /*----------------------------*/

    /* Localização*/
    #location {margin-top: -60px; z-index: 0;}
    #loc-mob {height: 470px;}

    /*Endereço Completo Descrito*/
    #full-adress {
        margin: 12px 0 ;
        font-size: 18px;
        text-align: center;
    }
    /************************************/
 
    /** FOOTER **/
    footer {
        width: 100%;
        background: url(../Imgs/Footer/nuvem-1280x.png) center no-repeat;
        height:420px;
        border-top: 5px solid var(--lines);
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .footer-info {width: 80%;}

    /*Card Footer*/
    .card-info-f {width: 100%;}

    /*CARD CONTATO*/
    .card-info-f ul {padding: 0 0 0 90px;}

    /*CARD AGREDECIMENTO NH*/
    .card-info-f p  {font-size: 18px;}    
    /*----------------------------*/   
    
    /*Descrição Final*/
    .foo-descrition {width: 50%;}

    /*Copyright*/
    .foo-descrition p {font-size: 18px;}

    /************************************/
}

@media (min-width: 1600px) {
.nav {display: block;}
.menu-toggle {display: none;}
.nav-mobile.active{display: none;}
.nav-overlay {display: none;}
}