@font-face{
    font-family: "plusjakarta";
    src: url(../font/PlusJakartaSans-VariableFont_wght.ttf);}
@font-face{
    font-family: "carbin";
    src: url(../font/Cabin-Regular.ttf);}
@font-face{
    font-family: "ibmplexsans";
    src: url(../font/IBMPlexSans-Regular.ttf);
}
@font-face{
    font-family: "redhat";
    src: url(../font/RedHatText-VariableFont_wght.ttf);
}
h1{
    font-family: 'plusjakarta';
    font-weight: bold;
}
h2{
    font-family: 'carbin';

}
h3, h4 , h5, h6{
    font-family: 'ibmplexsans';
}
p{
    font-family: 'redhat';
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*font-family: ;*/
}
@media (max-width:991px){
    .sidebar{
        background-color:rgba(70, 70, 70, 0.15) ;
        backdrop-filter: blur(10px);
    }
}
.titulo-master{
    margin-top: 110px;
}
body{
    background: url('https://images.unsplash.com/photo-1632059368252-be6d65abc4e2?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')rgb(24, 24, 24) fixed ;
    background-blend-mode: multiply;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/*INDEX*/
.first-banner{
    background: url('https://images.unsplash.com/photo-1521729839347-131a32f9abcb?q=80&w=2997&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')rgb(24, 24, 24) fixed ;
}
.news-item h3 {
    font-size: 1.2em;
    margin: 0.5em 0;
}

.news-item p {
    font-size: 1em;
    color: #555;
}

.news-item a {
    color: #007bff;
    text-decoration: none;
}

.news-item a:hover {
    text-decoration: underline;
}

/*PORTFOLIO*/
.img-portf{
    width: 350px;
}
.portf-titl-p{
    padding-top: 15px;
    text-align: center;
    padding-top: 10px;
}
#icon-portf{
    width: 231px;
    margin: auto;
    margin-top: 30px;
}
.conteiner-fluid{
    flex: 1;
}
footer{
    position: absolute;
    width: 100%;
    background-color:#677194;    
    min-height: 100px;
    padding: 20px 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;
    /*bottom: -783.9px; */
}
footer  .social_icon,    
footer  .menu-footer{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
    flex-wrap: wrap;
    padding-left: 0px;

}
footer  .social_icon    li,
footer  .menu-footer    li{
list-style: none;
}
footer  .social_icon    li  a{
font-size: 2em;
color: #fff;
margin: 0 10px;
display: inline-block;
transition: 0.5s;
}
footer  .menu-footer    li  a{
    font-size: 1.2em;
    color: #fff;
    margin: 0 10px;
    display: inline-block;
    text-decoration: none;
    opacity: 0.75;
}
footer  .menu-footer    li  a:hover{
    opacity: 1;
}
footer  .social_icon    li  a:hover{
    transform: translateY(-10px);
}
footer p{
    color: #fff;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 10px;
    font-size:1.1em;
}
footer .wave {
    position: absolute;
    top: -49px;
    left: 0;
    width: 100%;
    height: 70px;
    background: url(https://uploaddeimagens.com.br/images/004/791/950/original/wave-color.png?1717497729);
    background-size:  2091px 144px;
    background-repeat: no-repeat;
}
footer .wave0 {
    position: absolute;
    top: -42px;
    left: 0;
    width: 100%;
    height: 70px;
    background: url(https://uploaddeimagens.com.br/images/004/791/950/original/wave-color.png?1717497729);
    background-size:  2461px 144px;
    background-repeat: no-repeat;
}
footer .wave#wave1 {
    z-index: 1000;
    opacity: 1;
    bottom: 0;
    animation: animateWave 3s linear infinite;
}
footer .wave#wave2 {
    z-index: 999;
    opacity: 0.5;
    bottom: 10px;
    animation: animateWave_02 3s linear infinite;
}
footer .wave#wave3 {
    z-index: 1000;
    opacity: 0.2;
    bottom: 15px;
    animation: animateWave 4s linear infinite;
}
footer .wave#wave4 {
    z-index: 999;
    opacity: 0.7;
    bottom: 20px;
    animation: animateWave_02 2s linear infinite;
}
@keyframes animateWave{
    0%{
        background-position-x: 1500px;
    }100%{
        background-position-x: -900px;
    }
}
@keyframes animateWave_02{
    0%{
        background-position-x: -900px;
    }100%{
        background-position-x: 1900px;
    }
}
@keyframes animateWave_03{
    0%{
        background-position-x: 1900px;
    }100%{
        background-position-x: -900px;
    }
}
@keyframes animateWave_04{
    0%{
        background-position-x: -900px;
    }100%{
        background-position-x: 1900px;
    }
}
/*FORM ORÇAMENTO*/
#websitetypes, #servicetype{
    border: none;
    padding: 10px;
    color: #677194;
}
#qsomos{
    border: none;
}
#button-orcamt{
    padding: 10px;
    margin-top: 10px;
    width: 100%;
    color: white;
    background-color: #677194;
    border: none;
    border-radius: 4px;
}
.t3{
    color: #677194;
}
#resultado{
    color: #677194;
}
/* FORM MESSAGE */
.contact-disc{
    margin: 60px 0px 0px 30px;
}
#form{
    width: 95%;
    max-width: 600px;
    padding: 20px;
    background-color: whitesmoke;
    font-size: 12px;
    color: #677194;
    margin-top: 50px;
    justify-content: center;
    align-items: center;
    margin: auto;
}
#form   h2{
    color: #677194 ;
    text-align: center;
}
#form   button{
    padding: 10px;
    margin-top: 10px;
    width: 100%;
    color: white;
    background-color: #677194;
    border: none;
    border-radius: 4px;
}
.input-control {
    display: flex;
    flex-direction: column;
}
.input-control input {
    border: 2px solid #f0f0f0;
	border-radius: 4px;
	display: block;
	font-size: 12px;
	padding: 10px;
	width: 100%;
    color: #677194;
}
.input-control input:focus {
    outline: 0;
}

.input-control.success input {
    border-color: #09c372;
}

.input-control.error input {
    border-color: #ff3860;
}

.input-control .error {
    color: #ff3860;
    font-size: 9px;
    height: 13px;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    border-radius: 4px;
    margin-right: 2px;
    filter: invert(62%) sepia(33%) saturate(400%) hue-rotate(133deg) brightness(86%) contrast(92%)
  }
  input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1
  }

/*GOOGLE MAPS*/
/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
 #map {
    margin: auto;
    height: 20%;
    width: 100%;

  }
  
  /* 
   * Optional: Makes the sample page fill the window. 
   */
  html,
  body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  body .lb-data .lb-caption {
    font-weight: 400;
  }
  .profile-board{
    min-height: 90vh;
    background-color: var(--light-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .container .profile{
    padding: 20px;
    background-color: var(--white);
    box-shadow: var(--box-shadow);
    width: 500px;
    border-radius: 5px;
  } 
  .container .profile img{
    height: 150px;
    width: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 5px;

  }
  .update-profile{
    background-color: var(--light-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .update-profile form{
    padding: 20px;
    background-color: var(--white);
    box-shadow: var(--box-shadow);
    text-align: center;
    width: 700px;
    border-radius: 5px;
  }
  .update-profile form img{
    height: 200px;
    width: 200px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 5px;
  }
  .update-profile form  .flex{
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .update-profile form  .flex .inputBox{
    width: 49%;
  }
  .update-profile form  .flex .inputBox span{
    text-align: left;
    display: block;
    margin-top: 15px;
    font-size: 17px;
    color: white;
  }  
  .update-profile form  .flex .inputBox .box{
    width: 100%;
    border-radius: 5px;
    background-color: var(--light-bg);
    padding: 12px 14px;
    font-size: 17px;
    color: var(--black);
    margin-top: 10px;

  }
  @media (max-width:650px){
    .update-profile form  .flex {
        flex-wrap: wrap;
        gap: 0;
    }
    .update-profile form  .flex .inputBox{
        width: 100%;
    }
  }
  .form{
    width: 95%;
    padding: 20px;
    background-color: whitesmoke;
    font-size: 12px;
    color: #677194;
    margin-top: 50px;
    justify-content: center;
    align-items: center;
    margin: auto;
}
.form   h2{
    color: #677194 ;
    text-align: center;
}
.form   button{
    padding: 10px;
    margin-top: 10px;
    width: 100%;
    color: white;
    background-color: #677194;
    border: none;
    border-radius: 4px;
}
.button{
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: white;
    background-color: #677194;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    
}
.button-danger{
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: white;
    background-color: #dc3545;
    border: none;
    border-radius: 4px;
    text-decoration: none;
}
.button a{
    text-decoration: none;
    color: white;
}
.linkUpdate{
    margin-top: 15px;
    color: #677194;
}
.btn{
    margin-bottom: 10px;
}
.aga-5 {
    padding-top: 10px;
    font-weight: bold;
}
.board-date{
    width: 95%;
    padding: 20px;
    background-color: whitesmoke;
    font-size: 12px;

    justify-content: center;
    align-items: center;
    border-radius: 5px;
}
.form-control-1{
    display: block;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: 4px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.dash-updates{
    width: 95%;
    padding: 20px;
    background-color: whitesmoke;
    font-size: 12px;
    color: #677194;
    margin-top: 50px;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    margin: auto;
}
.tr-dash{
    padding: 20px 0px;
}