.montserrat-1 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }

* {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    text-decoration: none;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: "Montserrat", sans-serif;
}

a:link { 
    text-decoration: none; 
    color: var(--accent-color);
  } 
  a:visited { 
    text-decoration: none; 
  } 
  a:hover { 
    text-decoration: none; 
  } 
  a:active { 
    text-decoration: none; 
  }

#footericon{
    color: white;
}


.container1{
    z-index: -100;
    overflow: hidden;
    width: 100%;
    flex-wrap: wrap;
}
.bubbles{
    display: flex;
}

.bubbles span{
    position: relative;
    opacity: 20%;
    width:30px;
    height:30px;
    background: gray;
    margin: 0 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 5px #525252,
    0 0 0 5px #5a5a5a,
     0 0 0 10px #9c9c9c;
    animation: animate 10s linear infinite;
    animation-duration: calc(200s / var(--i));
}

.bubbles span:nth-child(even){
    border-radius: 30%;
    background: var(--bubblecolor);
    box-shadow: 0 0 0 5px var(--bubbleshadow),
    0 0 0 5px var(--bubbleshadow2),
     0 0 0 5px var(--bubbleshadow3);
}
@keyframes animate{
    0%
    {transform: translateY(100vh) scale(0)};
    100%
    {transform: translateY(0) scale(1);};
}

:root{
    --white-color: #ffffff;
    --black-color: #000000;
    --dark-color: #141414;
    --grey-color: #808080;
    --dark-background-color: #000000;
    --light-background-color:#ffffff; 
    --accent-color: #0c3dff;
    --pfpshadow: #0c3dff;
    --primary-color:#000000;
    --secondary-color: #808080;
    --navcolor: #000000;
    --navtext: #ffffff;
    --formtext: #000000;
    --bubblecolor: #4391ff;
    --bubbleshadow: #378afe;
        --bubbleshadow2: #66a6ff;
            --bubbleshadow3: #a8b6ff;

    --sidebar-width: 400px;
}

body .accordion{
    background-color: var(--light-background-color);
    transition: .5s;
}

h1, h2, h3, h4, h5, h6{
    color: var(--primary-color);
}


/* CLASSES */ 

.nav-link:hover{
    transform: scale(1.2);
    transition: 0.2s ease-in-out;
}
.primary-button {
    height: 45px;
    width: 150px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 5px;
    color: var(--navtext);
    transition: 0.5s ease-in-out;
    background-color: var(--accent-color);
}

.primary-button:hover{
    color: var(--accent-color);
    background-color: transparent;
    transform: scale(1.2);
    border: 1px solid var(--accent-color);
    
}

.secondary-button {
    height: 45px;
    width: 150px;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 5px;
    color: var(--accent-color);
    transition: 0.5s ease-in-out;
    background-color: var(--navtext);
    border: 1px solid var(--accent-color);
    
}

.secondary-button:hover{
    color: var(--formtext);
    background-color: transparent;
    transform: scale(1.2);
    border: 3px solid var(--formtext);
}

.full-height{
    min-height: 100vh;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.full-width{
    width: 100%;
}

.brand-text{
    color: var(--accent-color);    
}

/* CABECALHO */
.navbar {
    background-color: var(--navcolor);
    font-size: 25px;
    transition: .5s;
}

p{
    color: var(--formtext);
}
.navbar-brand img{
    border: 10px solid var(--accent-color);
    box-shadow: 0px 5px 60px var(--pfpshadow);
}

.navbar .nav-link{
    color: var(--white-color);
}

.navbar .nav-link:hover{
    color: var(--accent-color);
}

@media (min-width: 992px) {

    .navbar{
        min-height: 100vh;
        width: var(--sidebar-width);
    }

    #content-wrapper{
        padding-left: var(--sidebar-width);
    }
}


.zoom:hover{
    transform: scale(1.1);
    transition: 0.3s ease-in-out;
}
/* serviços*/

.service-card{
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid var(--accent-color);
}

.service-icon{
    height: 75px;
    width: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-color: var(--accent-color);
}

.service-icon img{
    height: 50px;
}

.service-icon:hover{
    opacity: 80%;
}

/*Sessão de resumo pessoal */ 

.resume-box{
    position: relative;
}

.resume-box::before{
    content: '';
    height: 100%;
    width: 1px;
    background-color: var(--accent-color);
    position: absolute;
    left: 0;
    top: 0;
}

.resume-box::after{
    content: '';
    height: 15px;
    width: 15px;
    border-radius: 100%;
    background-color: var(--accent-color) ;
    position: absolute;
    left: -7px;
    top: 0;
}

/* Contato pessoal */

.custom-input{
    height: 50px ;
}

.custom-input,
.custom-textarea,
.form-control:focus,
.form-control::placeholder {
    color: var(--formtext) !important;
}

/* FAQ */

.accordion-item {
    border: none;
    margin-block: 10px;
    background: transparent;
    color: var(--secondary-color) !important;
}

.accordion-button{
    color: var(--primary-color) !important;
    border-bottom: 1px solid var(--black-color)!important ;
}

.accordion-button::focus {
    box-shadow: none !important;
    border-bottom: 1px solid var(--black-color) !important;
}

.accordion-button:not(.collapsed){
    box-shadow: none !important;
    color: var(--primary-color) !important;
    background-color: rgba(60, 114, 201, 0.3) !important ;
}

/* footer */

.footer-text{
    border-top: 1px solid var(--secondary-color);
}

/* Botão pra voltar pro topo*/
.contact-form{
    color: var(--navtext);
}
.back-to-top{
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    height: 40px;
    width: 40px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background-color: var(--grey-color);
}

@property --box-color {
    syntax: "";
    inherits: false;
    initial-value: cornflowerblue;
  }

.btntheme{
    position: fixed;
    bottom: 20px;
    right: 80px;
    z-index: 99;
    height: 40px;
    width: 40px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background-color: var(--grey-color);
    text-decoration: none;
    color: var(--white-color);
}

.btntranslate{
    position: fixed;
    bottom: 20px;
    right: 120px;
    z-index: 99;
    height: 40px;
    width: 40px;
    display: grid;
    place-items: center;
    border-radius: 5px;
    background-color: var(--grey-color);
    text-decoration: none;
    color: var(--white-color);
}

.light-theme {
    background-color: var(--white);
    color: var(--black-color);
    
    transition: .5s;
    
  }
  
  .dark-theme {
    background-color: var(--black-color);
    --navcolor: var(--dark-color);
    --navtext: var(--black-color);
    --formtext: var(--white-color);
    --accent-color: #66c95d;
    --bubblecolor:#29d140;
    --bubbleshadow:#37fe8a;
    color: var(--white-color);
    --pfpshadow: #70e665;

    transition: .5s;
  }

.back-to-top a {
    color: var(--white-color);
    text-decoration: none;
}

.back-to-top i {
    cursor: pointer;
    font-size: 1.3rem;
    font-weight: 550;
    transition: 0.5s ease-in-out;
    color: var(--white-color);
}