@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;1,100&display=swap');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


:root{
    --cor1: #2D76FB;
    --cor2: white;
    --cor3: #9b9b9b;
}

body{
    overflow-x: hidden;
    font-family: 'Roboto', sans-serif;
    max-width: 2000px;
    margin: auto;
}

.titulo-section{
    color: var(--cor1);
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 20px;
    text-transform: uppercase;
}

label.heart-titulo{
    position: relative;
    color: #a5a5a5;
}

label.heart-titulo::after, label.heart-titulo::before{
    position: absolute;
    content: "";
    width: 100px;
    height: 1px;
    top: 8px;
    right: 25px;
    background-color: #838383;
 }
 
 label.heart-titulo::before{
     left: 25px;
 }

/* ---------------------------- Config NavBar ---------------------------- */
nav{
    display: flex;
    position: fixed;
    justify-content: space-between;
    max-width: 2000px;
    width: 100%;
    z-index: 1;
    background-color: #2d74f80c;
}


nav div#logo{
    display: flex;
    width: 250px;
    margin-left: 60px;
}
nav div#logo p{
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 50px;
    position: relative;
    color: var(--cor2);
}

nav div#logo p::before{
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    top: 29px;
    right: -5px;
    background-color: var(--cor1);
}

nav div#logo small{
    margin-left: 60px;
    position: relative;
    line-height: 55px;
    font-style: italic;
    color: #ffffff;
}

nav div#logo small::after{
    position: absolute;
    content: "";
    width: 1px;
    height: 25px;
    border-radius: 50%;
    inset: 15px -20px;
    background-color: var(--cor1);
}

nav ul{
    display: inline;
    line-height: 55px;
    margin-right: 20px;
}

nav ul li{
    display: inline-block;
    margin: 0 20px;
}

nav ul li a{
    color: var(--cor2);
    text-decoration: none;
    display: inline-block;
    position: relative;
    text-decoration: none;
    font-size: 1em;
    z-index: 3;
}

nav a:before {
    content: "";
    display: block;
    position: absolute;
    height: 3px;
    inset: 0 0 0 0;
    background-color:var(--cor1);
    transition: transform .3s ease;
    transform: scaleX(0);
    transform-origin: top left;
}

nav a:hover::before {
    transform: scaleX(1);
    transform-origin: top left;
}

nav input{
    display: none;
}

nav label{
    display: none;
    color: var(--cor1);
    font-size: 30px;
    line-height: 50px;
    margin-right: 20px;
}

/* ---------------------------- Config Header ---------------------------- */
header{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
    background: url("https://cdn.discordapp.com/attachments/854958362727153744/854958852046192660/backgrond-navbar1.png");
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--cor2);
}

header div#text-principal{
    text-align: center;
}

header div#text-principal div{
    position:relative;
    max-width: 215px;
    margin: auto;
}

header div#text-principal div h1{
    font-size: 3.3rem;
    font-weight: 500;
    max-width: 675px;
    width: 100%;
}

header div#text-principal div::before{
    position: absolute;
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    top: 42px;
    right: 0px;
    background-color: var(--cor1);
}

header div#text-principal p{
    font-weight: 100;
    font-size: 3rem;
    margin: 0  0 20px 0;
    letter-spacing: 3px;
    text-shadow: 1px 1px 1px #00000065;
}

header div#text-principal p span{
    color: var(--cor1);
}

header div#text-principal small{
    margin-top: 1000px;
    position: relative;
}

header div#text-principal small::after, header div#text-principal small::before {
    position: absolute;
    content: "";
    width: 8vw;
    height: 1px;
    top: 7px;
    right: 105%;
    background: var(--cor1);
}

div#text-principal small::before{
    left: 105%;
}

div#icones-sociais{
    position: relative;
    top: 20%;
}

div#icones-sociais svg{
    margin: 0 7px;
    cursor: pointer;
    font-size: 1.3em;
    color: #9b9b9b;
}

div#icones-sociais svg:hover{
    color: #fff;
}

/* ---------------------------- Config Features ---------------------------- */
main section#features{
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #f3f3f3;
    padding: 100px 20px;
}

main section#features div#cards-feat{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 90px 0;
    justify-content: center;
    gap: 90px;
}

main section#features div#cards-feat div.card-feat{
    max-width: 450px;
    margin-bottom: 100px;
    padding: 10px;
}

div.card-feat div.titulo-feat{
    display: flex;
    margin-bottom: 10px;
}

div.card-feat h3.feat-h3{
    margin-left: 10px;
    font-weight: 500; 

}

div.card-feat .feat-p{
    line-height: 25px;
    margin-left: 45px;
    color: var(--cor3);
}

/* ---------------------------- Config Smartphone ---------------------------- */
main section#smartphone{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 0;
}

main section#smartphone p#titulo-p{
    text-align: center;
    padding: 0 20px;
    margin-bottom: 140px;
    line-height: 35px;
    max-width: 1000px;
}

main section#smartphone div#smart-cards{
    display: flex;
    justify-content: center;
    width: 100%;
    gap:1px;
}

div#smart-cards div#img-iphone{
    margin-top: -30px;
    max-width: 340px ;
}

div#smart-cards div#img-iphone img{
    width: 100%;
}

div.accusan-timar{
    max-width: 400px;
    margin: 0 50px 30px 50px;
    padding: 20px;
}

div.accusan-timar:hover{
    background: #ffff002d;
}

div.smart-titulo{
    display: flex;
    margin-bottom: 10px;
}

div.smart-titulo svg{
    color: var(--cor3);
    font-size: 1.2em;
}

div.smart-titulo h3{
    margin-left: 25px;
    font-weight: 500;
}

div.accusan-timar p{
    margin-left: 40px;
}

/* ---------------------------- Config Works ---------------------------- */
main section#works{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 20px;
}

div.titulo-inicial{
    max-width: 1000px;
    text-align: center;
}

div.titulo-inicial p{
    line-height: 25px;
    margin-top: 50px;
}

section#works ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    list-style: none;
    margin: 80px 0;
}

section#works ul li{
    display: inline-block;
    margin: 10px 0;
    padding: 0;
}

section#works ul li a{
    padding: 8px 15px;
    text-decoration: none;
    color: black;
    font-weight: 500;
}

section#works ul li a:hover{
    background-color: var(--cor1);
    color: var(--cor2);
    border-radius: 5px;
}

/* ---------------------------- Config Thumbs ---------------------------- */
section#thumbs{
    display: flex;
    flex-wrap: wrap;
}

div.img-thumb{
    width: 25%;
    max-height: 200px;
    position: relative;
}

div.img-thumb img{
    width: 100%;
    height: 100%;
}

div.img-thumb div.thumb-hover{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    color: var(--cor2);
    background-color: #2d75fbcb;
    width: 100%;
    height: 100%;
    visibility: hidden;
}

div.img-thumb:hover div.thumb-hover{
    visibility: visible;
}

/* ---------------------------- Config Meet Our Team ---------------------------- */
section#meet-our-team{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 20px;
}

div#team{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 40px;
    margin-top: 100px;
    width: 100%;
}

div#team figure{
    max-width: 300px;
    width: 100%;
    text-align: center;
    position: relative;
    margin-top: 50px;
}

div#team figure img{
    width: 100%;
    height: 100%;
}

div#team figure figcaption{
    margin-top: 10px;
    font-size: 1rem;
}

div#team figure small{
    margin-top: 10px;
    font-weight: 300;
    font-size: .7em;
}

div#team figure:hover div.hover-team{
    visibility: visible;
}

div#team figure:hover figcaption{
    color: rgb(39, 158, 45);
}

div.hover-team{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    width: 100%;
    height: 100%;
    background-color:#2d75fbcb ;
    color: white;
    visibility: hidden;
}

div.hover-team p{
    font-size: .8em;
}

div.hover-team small{
    font-size: .7em;
}

div.hover-team a svg{
    background: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1.5em;
    margin: 0 5px;
    /* background: var(--cor1); */
}

div.icones-hover-team{
    position: absolute;
    max-width: 200px;
    width: 100%;
    bottom: 5px;
}
/* ---------------------------- Config Some Fun Facts ---------------------------- */
section#some-fun-facts{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;
    padding-top:70px ;
    background: url("../assets/grand-palace-1822487_1920.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

div#facts-icon{
    display: flex;
    flex-wrap: wrap;
    margin-top: 50px;
    width: 80%;
    justify-content: space-around;
    margin-bottom: 50px;
}

div#facts-icon figure{
    text-align: center;
    max-width: 150px;
    width: 100%;
    margin: 20px 0;
}

div#facts-icon label{
    text-shadow: 1px 1px 1px black;
    text-align: center;
    color: var(--cor2);
    font-size: 3rem;
    font-weight: 100;
    position: relative;
}

div#facts-icon label::after{
    position: absolute;
    content: "";
    width: 100px;
    height: 100px;
    top: -25px;
    left: -30px;
    border: 2px solid white;
    border-radius: 50%;
}

div#facts-icon figure figcaption{
    margin-top: 50px;
    font-size: 150%;
    color: var(--cor2);
}

div#facts-icon figure small{
    color: var(--cor2);
    font-size: 1rem;
    text-shadow: 1px 1px 1px black;
}

/* ---------------------------- Config Let´s Discuss ---------------------------- */
section#lets-discuss{
    display: flex;
    flex-direction:column;
    align-items: center;
    padding: 100px 20px;
}

div#lets-conteudo{
    display: flex;
    justify-content: center;
    max-width: 1600px;
    width: 100%;
    padding: 0 20px;
    margin-top: 90px;
}

div#lets-texto{
    max-width: 300px;
    margin-bottom: 60px;
}

div#lets-texto h2{
    font-weight: 500;
    margin-bottom: 15px;
}

div#lets-texto p{
    font-weight: 300;
    line-height: 25px;
}

div.form-icons-container{
    display: flex;
}

div#lets-form{
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    padding: 0 20px;
}

div.form-name{
    max-width: 420px;
    width: 100%;
    padding: 0 15px 0 0;
}

div.form-email{
    max-width: 420px;
    width: 100%;
    padding: 0 0 0 15px;
}

div#lets-form h2{
    margin-bottom: 20px;
}

div#lets-form form{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    position: relative;
    width:100%;
}

div#lets-form form input{
    width: 100%;
    padding: 10px 0 15px 0px;
    margin-top: 15px;
    border: none;
    outline: none;
    border-bottom: 1px solid #ccc;
}

div#lets-form form input:nth-child(1){
    margin-right: 60px;
}

div#lets-form form input:nth-child(3){
    width: 100%;
}

div#lets-form form button{
    width: 150px;
    border: none;
    margin-top: 20px;
    margin-right: 10px;
    background: transparent;
    font-weight: 600;
    font-size: 1em;
}

div#lets-form form button svg{
    color: var(--cor1);
    margin-right: 10px;
    font-size: 1.1em;
}

div.icones-discuss{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    color: var(--cor3);
}
/* ---------------------------- Config Mapa ---------------------------- */

section#mapa{
    width: 100%;
    height: 40vh;
    margin-top: 100px;
    background-color: #2d75fb0c;
}

/* ---------------------------- Config Footer ---------------------------- */
footer{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding-top: 50px;
    background-color: #000;
    color: #fff;
    font-weight: 200;
}

footer .sarajevo, .subscribe, .explore{
    max-width: 250px;
    margin: 20px 20px;
}

footer div h3{
    margin-bottom: 20px;
}

footer div p{
    font-size: .8em;
    line-height: 22px
}

footer div.input{
    width: 100%;
    border: none;
    margin-bottom: 15px;
}

footer div.input input{
    background-color: #000;
    border: 2px solid #fff;
    border-right: none;
    padding: 8px;
    width: 85%;
    color: #fff;
    outline: none;
}

footer div.input button{
    width: calc(100% - 83%);
    border: 2px solid #fff;
    border-left: none;
    background: transparent;
    height: 35px;
    margin-left: -10px;
    text-align: center;
    cursor: pointer;
}

footer div.input button svg{
    font-weight: 200;
    color: #fff;
}

div.explore-ul{
    display: flex;
    gap: 20px;
}

footer div ul{
    list-style: none;
}

/* ---------------------------- Config Outros ---------------------------- */
::-webkit-scrollbar{
    display: none;
}