/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Island+Moments&display=swap');

@font-face {
    font-family: 'Cera Round Pro';
    src: url(../assets/fonts/TypeMatesCeraRoundProRegular.otf) format('otf');
}

/* ------------ VARIABLES ------------ */
:root {
    /* typography */
    --font-family: 'Cera Round Pro';
    --font-family-sec: 'Island Moments',  cursive;

    --h1-font-size: ;
    --h2-font-size: ;
    --h3-font-size: ;
    --h4-font-size: ;
    --h5-font-size: ;
    --h6-font-size: ;

    --font-thin: ;
    --font-extra-light: ;
    --font-light: ;
    --font-regular: ;
    --font-medium: ;
    --font-semi-bold: ;
    --font-bold: ;
    --font-extra-bold: ;
    --font-black: ;

    --icon-small: ;
    --icon-medium: ;
    --icon-large: ;


    /* colors */
    --color-body: linear-gradient(180deg, #030022 20%, #162565 50%, #000000 90%, #030022 100%);
    --primary-color: red;
    --cor-titulo: linear-gradient(100deg, #659DF6 0%, #FF9CB4 100% );

    --flex: flex;
}
/* -------------------------- BASE ------------------------------------ */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    background: var(--color-body);
    color: white;
}   

a {
    text-decoration: none;
    color: inherit;
}

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


/*------------- header -------------*/
.header {
    background-color: rgba(0, 0, 0, 0.5);
    /* background-color: red; */
    color: var();
    display: flex;
    height: 50px;
    position: fixed;
    bottom: 0;
    width: 100%;
    box-shadow: 0px 0px 7px 0px #142361;
    z-index: 1;
    
}

.header__nav {
    padding: 1rem;
    /* border: 2px solid black; */
    width: 100%;

}

.header__menu {
    display: flex;
    /* border: 2px solid black; */
    gap: 2rem;
    justify-content: center;

}

.header__item {
    list-style: none;
    color: white;

}

.item:hover {
    /* box-shadow: 0rem 0rem 0.5rem 0rem rgb(255, 255, 255); */
    /* text-shadow: 0rem 0rem 0.5rem 0rem rgb(255, 255, 255);; */
}

/*---------- base ----------*/
.container {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 1rem;
}

/*----- about -----*/
.about {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5rem 0rem 0rem 0rem;
    height: 100vh;
    border: 2px solid rgb(255, 0, 0);


}


.about__img {
    width: 100px;
    border-radius: 1rem;
    border: 0.3rem solid white;
    margin-bottom: 1rem;
}

.about__title {
    color: transparent;
    background:  var(--cor-titulo);
    background-clip: text;
    margin-bottom: 1rem;
    font-family: var(--font-family-sec);
}

.about__social {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.about__text {
    color: white;
    text-align: center;
}

.about__social--linkedin, .about__social--github {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 0.10rem solid white;
    border-radius: 0.3rem;
    
}

.about__social--linkedin:hover, .about__social--github:hover {
    box-shadow: 0rem 0rem 0.5rem 0rem rgb(255, 255, 255);
    cursor: pointer;
}

.about__icon {
    color: white;
    font-size: 24px;
}




/*------ services ------*/
.services {
    /* border: 2px solid rgb(0, 255, 179); */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.services__title {
    text-align: center;
    padding: 1.5rem 0rem 1rem 0rem;
}

.services__container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}



.services__teste {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    gap: 1rem;
    padding: 0rem 0rem 1rem 0rem;
    box-shadow: 0px 0px 10px 0px red;
    /* margin-top: 10px; */
    padding-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 1rem;


}

.services__icon {
    font-size: 5rem;
}




/*----- projects -----*/
.projects {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100vh; /* mudar*/
    border: 2px solid rgb(255, 0, 221);
}

.projects__title {
    color: transparent;
    background:  var(--cor-titulo);
    background-clip: text;
    margin-bottom: 1rem;
}

.projects__separator {
    height: 2px;
    width: 100px;
    background-color: white;
}

.projects__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 300px;
    border: 1px solid red;
    overflow: visible;

}

.projects__title_h3 {

}

.projects__carousel {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    height: 200px;
    background-color: rgb(122, 45, 45);
    overflow: visible;

    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 0 15%;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
}

.projects__carousel::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }

.projects__carousel--scrollable {

}

/*  */

.projects__carousel-item {
    width: 120rem;
    height: 10rem;
    background-color: blue;
    flex: 0 0 70% ;
    scroll-snap-align: center;
    overflow: hidden;
    max-width: 700px;
    border-radius: 1rem;
}

.projects__banner {

}










































/*----- contact -----*/
.contact {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    position: fixed;
    left: 0;
    bottom: 50px;
    width: 100%;
    height: 400px;
    border-radius: 1rem 1rem 0rem 0rem;
    z-index: 0;
    background-color: #659DF6;
}

.contact__divisor {
    width: 100px;
    height: 0.1rem;
    background-color: white;
    margin-bottom: 1rem;
    align-self: center;
}

.contact__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact__input {
    width: 100%;
    height: 30px;
    padding-left: 1rem;
    border-radius: 0.2rem;
}

.contact__textarea {
    height: 100px;
    border-radius: 0.2rem;

}

.contact__submit {
    margin-bottom: 1rem;
    height: 30px;
    border-radius: 7px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
}

.contact__separator {
    display: flex;
    gap: 10px;
    align-items: center;
    height: 50px;
    margin-bottom: 1rem;
}

.contact__line {
    height: 1px;
    width: 100%;
    background-color: white;
}

.contact__whatsapp {
    height: 30px;
    border-radius: 7px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

























/* MEDIA QUERIES */

/* celular */
@media (min-width: 480px) {
    .container {
        max-width: 480px;
        border: 1px solid blue;
    }

    .about {
        /* background-color: red; */
    }

    .services__container{
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .services__teste{
        width: calc(100% / 2 - 1rem);
        margin-inline: auto;
    }

}
/* celular */
@media (min-width:768px) {
    .container {
        max-width: 768px;
        padding-inline: 1.5rem;
    }

    .about {
        /* background-color: blue; */
    }
}
/* tablet */
@media (min-width:1024px) {
    .container {
        max-width: 1024px;
        padding-inline: 3rem;

    }

    .services__teste{
        width: calc(100% / 3 - 1rem);
        margin-inline: auto;
    }

}

/* computador */
@media (min-width:1280px) {
    .container {
        max-width: 1280px;
    }
}

/* computador */
@media (min-width:1440px) {
    .container {
        max-width: 1440px;
    }
}