*{
    margin: 0;
    padding: 0;
    font-family: "Saira";
}

:root{ 
  --color-icons: #3f82af;
  --body-color: #F9F7F7;
  --top-color: #364F6B;
  --text-whcolor: #F9F7F7;
  --text-Dcolor: #1E1E1E;
  --card-color: #e7e7e7;
  --btn-CTA: #ccff00;
  --btn-CTAhover: #99bd0b;

}

html {
    scroll-behavior: smooth;
}

body{
    font-family: "Saira";
    background-color: var(--body-color);
    color: #2e2e2e;
}

h1 {
    font-family: "Saira", system-ui;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.2;
}

h2{
    font-family: "Montserrat-bold" serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

h3{
    font-family: "Montserrat-Black" serif;
    font-weight: 700;
    font-size: calc(1.4rem + .6vw);
    font-weight: 700;
}

p {
    font-size: 1.3rem;
}

a {    
    color: var(--text-whcolor);
    text-decoration: none;
}

/* Navigation bar */

li {
    list-style: none;
}

.navbar {
    padding-top: 1rem;
    font-weight: 800;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    transition: 0.3s;
    position: fixed;
    z-index: 20;
    width: 100vw;

}

.navbar a:hover {
    opacity: 0.7;
}

.logo {
    width: 5rem;
    transition: 0.2s ease-out;
    filter:drop-shadow(4px 2px 1px rgba(3, 24, 44, 0.4));
}

.logo:hover {
    
  filter:drop-shadow(4px 2px 1px rgba(3, 24, 44, 0.4));
}

.nav-menu {
    position:absolute;
    top: -150px;
    left: 50%;
    gap: 0;
    border-radius: 0 0 20px 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
    text-align: center;
    flex-direction: row;
    width: 40%;
    transform: translate(-50%, -150%);
    transition: 0.3s;
    z-index: 2;

}

    .nav-menu.active {
        top: 80px;
        width: 40%;
        background: linear-gradient(135deg, rgba(12, 32, 56, 0.5), rgba(7, 6, 51, 0.2));
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 20px;
        border:1px solid rgba(255, 255, 255, 0.18);
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.27);
    }

    .nav-menu.active:hover {
        background: linear-gradient(135deg, rgba(8, 26, 46, 0.4), rgba(3, 2, 34, 0));
    }

.nav-link {
    transition: 0.5s ease;
    font-size: 1.3rem;
}

.nav-link:hover {
    filter:drop-shadow(4px 2px 1px rgba(3, 24, 44, 0.4));
}

.hamburguer {
    width: 100px;
    cursor: pointer;
}

.hamburguer.active .bar:nth-child(2) {
    opacity: 0;

}
.hamburguer.active .bar:nth-child(1) {
    transform: translateY(11.5px) rotate(45deg);

}
.hamburguer.active .bar:nth-child(3) {
    transform: translateY(-20px) rotate(-45deg);
}

.bar{
    display: block;
    width: 70px;
    height: 7px;
    border-radius: 5px;
    margin: 9px auto;
    background-color: var(--btn-CTA);
    filter:drop-shadow(4px 3px 3px rgba(3, 24, 44, 0.4));
    transition: all 0.3s ease-in-out;
}


/* Header */

#title {
    color: var(--text-whcolor);
    overflow: hidden;
}

.content-title{
    margin-top: 147px;
    padding: 0 4rem 0;
    text-align: center;
    display: flex;
    justify-content: space-around;
}

.btn-topo{
    width: 100%;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-topo p{
    font-size: 1.3rem;
    margin: 0 1rem;
}

button{
    font-family: "Montserrat-Black" serif;
    cursor: pointer;
}

.btn-lg {
    z-index: 2;
    font-size: 3rem;
    padding: 0.5rem 2rem;
    border-radius: 8px;
    color: var(--text-whcolor);
    border: none;
    background-color: var(--color-icons);
}
.btn-lg:hover {
    background-color: var(--body-color);
    color: var(--top-color);

}

.btn-lg-topo {
    z-index: 2;
    font-size: 3rem;
    padding: 0.2rem 5rem;
    border-radius: 8px;
    color: var(--text-Dcolor);
    border: none;
    background-color: var(--btn-CTA);
    font-weight: 700;
}
.btn-lg-topo:hover {
    background-color: var(--body-color);
    color: var(--color-icons);

}

.btn-lg-trabalho{
    z-index: 2;
    font-size: 2rem;
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
    color: var(--text-Dcolor);
    border: none;
    background-color: var(--btn-CTA);
    font-weight: 700;
    
}
.btn-lg-trabalho:hover {
    background-color: var(--body-color);
    color: var(--color-icons);

}


.outline-btn {
    background-color: #ffffff00;
    border: solid 2px var(--body-color);
}

.text-title{
    margin-top: 2rem;
    z-index: 2;
}

.img-top{
    display: flex;
}

.imagem-do-titulo{
    align-items: end;
    width: 35rem;
    z-index: 5;
}

.square1{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  right: 8%;
  top: 15rem;
  background-color: var(--color-icons);
  height: 55px;
  width: 55px;
  border-radius: 10px;
  animation: flutuando 12s ease-in-out infinite;
}

.fa-paintbrush{
    font-size: 1.5rem;
}

@keyframes flutuando {
  0% {
    transform: translateY(0) translateX(0) rotate(10deg);
  }
  50% {
    transform: translateY(-20px) translateX(25px) rotate(-5deg);
  }
  100% {
    transform: translateY(0) translateX(0) rotate(10deg);
  }
}

@keyframes flutuando2 {
  0% {
    transform: translate(0px, 0px) rotate(10deg);
  }
  50% {
    transform: translate(20px, 10px) rotate(-5deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(10deg);
  }
}

.square2{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  right: 28%;
  top: 30rem;
  background-color: var(--color-icons);
  height: 55px;
  width: 55px;
  border-radius: 10px;
  transform: rotate(-25deg);
  animation: flutuando2 10s linear infinite;
}

.fa-pen-to-square{
    font-size: 1.5rem;
}

.square3{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  right: 8%;
  top: 34rem;
  background-color: var(--color-icons);
  height: 55px;
  width: 55px;
  border-radius: 10px;
  transform: rotate(5deg);
  animation: flutuando 17s ease-in-out infinite;
}

.fa-image{
    font-size: 1.5rem;
}

.square4{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  right: 26%;
  top: 12rem;
  background-color: var(--color-icons);
  height: 55px;
  width: 55px;
  border-radius: 10px;
  transform: rotate(-15deg);
  animation: flutuando2 15s ease-in-out infinite;
}

.fa-pen-nib{
    font-size: 1.5rem;
}


/* Features */

#features {
    min-height: 500px;
    position: relative;
    background-color: var(--body-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 0.5rem;
}

#features h2{
    color: var(--text-Dcolor);
    margin-top: 4rem;
}

.features-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.ft-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 1rem;
    border-radius: 20px;
    margin: 0.5rem;
    background-color: var(--card-color);
    filter:drop-shadow(-4px 15px 10px rgba(18,18,18,0.4));

}

.ft-content:hover{
    transform:  scale(1.05);
    z-index: 5;
}

.ft-content p {
    font-size: 1.3rem;
    line-height: 1.2;
    margin-bottom: 2rem;
}

.features-item{
    text-align: center;
    margin: 2rem 0;
}

.img-features{
    width: 6.5rem;
    transition: transform 0.2s ease-out;
}
.img-features:hover{
    transform:  scale(1.05) rotate(-15deg);
    filter:drop-shadow(4px 2px 4px rgba(18,18,18,0.4));
}

.btn-feedback{
    font-weight: 700;
}

.btn-feedback:hover{
    color: var(--text-whcolor);
    background-color: var(--btn-CTAhover);
}


/* Testimonials */

#testimonials {
    margin: 2rem 0 0;
    padding: 3.5rem 0;
    width: 100%;
    color: #fff;
    text-align: center;
}

#testimonials h1{
    color: var(--text-whcolor);
}
#testimonials p{
    color: var(--text-whcolor);
    font-size: 0.9rem;
    padding-bottom: 2rem;
}

.swiper {
    width: 340px;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
}


.swiper-slide:nth-child(1n) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    background-color: var(--color-icons);
}

.swiper-slide:nth-child(1n) h2{
    padding-top: 2rem;
}

.swiper-slide:nth-child(1n) a{
    padding-bottom: 2rem;
}

.swiper-pagination{
    top: 20rem;
}

.swiper-pagination-bullet{
    background: var(--body-color);
    
}

.swiper-pagination-bullet-active{
    background: var(--color-icons);
    
}

.swiper-button-prev,
.swiper-button-next{
    background-color: var(--body-color);
    opacity: 0.8;
    width: 25px;
    height: 25px;
    color: var(--color-icons);
    border: 1px solid #f9fafb;
    border-radius: 100%;
    box-shadow: 0px 0px 20px 0px rgba(4, 15, 36, 0.2);

}


.swiper-button-prev::after{
    content: '\f053';
    font-family: 'Font Awesome 5 free';
    font-weight: 900;
    font-size: 14px;
}
.swiper-button-next::after{
    content: '\f054';
    font-family: 'Font Awesome 5 free';
    font-weight: 900;
    font-size: 14px;
}


/* Imagens Tela Cheia */

.img-trabalhos{
    width: 100%;
    background-image: url(/images/bg\ Title.png);
}

.TelaCheia:hover{
    cursor: pointer;    
    transform: scale(1.02);
    box-shadow:  0 0 10px #ffffff, 
                 0 0 20px #ffffff;

}


/* Footer */

#footer {
    width: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    color: var(--color-icons);
    padding: 0 0 1.5rem;

}

.container-footer{
    grid-column: 1/4;
    width: 90vw;
    margin: 2rem 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas: 
    " btn1  btn1 btn2 btn2 btn3 btn3 "
    " btn4 btn4 btn4 btn5 btn5 btn5 "
    ;
    gap: 10px;
    
}

.container-footer a {
    text-align: center;
    color: var(--text-whcolor);
    background-color: var(--color-icons);
    border-radius: 5px;
    font-size: 1.25rem;
    transition: transform 200ms ease-in-out;
}

.container-footer a:hover{
    transform: scale(1.02);
    opacity: 0.8;

}

.contato1{
    grid-area: btn1;
}

.contato2{
    grid-area: btn2;
}

.contato3{
    grid-area: btn3;

}

.contato4{
    grid-area: btn4;

}

.contato5{
    grid-area: btn5;

}

.contato-footer{
    grid-column: 1/4;
    margin-top: 2rem;
    font-size: 1.5rem;
}

#copy{
    grid-column: 1/4;
}

.bg-stars {
    background-image: url(../images/bg\ Title.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}



@media (max-width:1131px) {
    /* Header */
    #title {
        color: var(--text-whcolor);
    }

    h1 {
        font-size: 1.7rem;
        font-weight: 900;
        line-height: 1.2;
    }
    .text-title{
        width: 90%;
    }
    .btn-lg {
        font-size: 1.7rem;
    }
    .btn-topo{
        margin: 2rem 0 0.5rem;
        align-items: center;
        justify-content: center;
    }

    .btn-lg-topo {
        position: relative;
        z-index: 1;
        font-size: 2.3rem;
        padding: 0.2rem 2rem;
    }
    .btn-lg-trabalho {
        position: relative;
        z-index: 1;
        font-size: 1.2rem;
    }

    .content-title{
        margin-top: 80px;
        padding: 1rem 0 0;
        flex-direction: column;
        align-items: center;
    }

    .content-title p {
        padding: 1rem 0 0;
        font-size: 1rem;
        color: var(--text-whcolor);
    }

    .imagem-do-titulo{
        width: 90vw;
    }

    .square1{
        position: absolute;
        z-index: 0;
        right: 10%;
        top: 38rem;
        height: 50px;
        width: 50px;
      }
      
      .square2{
        position: absolute;
        z-index: 1;
        right: 79%;
        top: 50rem;
        height: 50px;
        width: 50px;
      }
      
      .square3{
        position: absolute;
        z-index: 1;
        right: 8%;
        top: 48rem;
        height: 50px;
        width: 50px;
      }
      
      .square4{
        position: absolute;
        z-index: 1;
        right: 70%;
        top: 36rem;
        height: 50px;
        width: 50px;
      }
    

    /* Navigation bar */

    .logo{
        width: 6rem;
    }
    .hamburguer {
        display: block;
    }
    .bar{
        width: 80px;
        height: 8px;
        margin: 10px auto;
    }

    .hamburguer.active .bar:nth-child(2) {
        opacity: 0;

    }
    .hamburguer.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);

    }
    .hamburguer.active .bar:nth-child(3) {
        transform: translateY(-28px) rotate(-45deg);
    }

    .nav-menu {
        position:absolute;
        top: -450px;
        left: 50%;
        gap: 0;
        border-radius: 0 0 20px 20px;
        text-align: center;
        flex-direction: column;
        width: 80%;
        transform: translate(-50%, -70%);
        transition: 0.3s;
        z-index: 2;
    }

    .nav-item {
        margin: 16px 0;
    }

    .nav-link {
        font-size: 2rem;
        font-weight: 700;
        
    }

    .nav-menu.active {
        width: 70%;
        top: 380px;
        background: linear-gradient(135deg, rgba(12, 32, 56, 0.5), rgba(7, 6, 51, 0.2));
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 20px;
        border:1px solid rgba(255, 255, 255, 0.18);
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.27);
    }

    .nav-menu.active:hover {
        background: linear-gradient(135deg, rgba(8, 26, 46, 0.4), rgba(3, 2, 34, 0));
    }


    /* Navigation bar */

    #features{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .features-content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2rem 0.5rem;
    }
    .ft-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        margin: 1rem;
    
    }
    .ft-content p {
        font-size: 1.2rem;
        line-height: 1.2;
    }

        
    .features-item{
        min-width: 30vw;
    }
    .features-item h3{
        font-size: 1.4rem;
    }
    .img-features{
        width: 7rem;
    }

    .btn-feedback{
        font-size: 2rem;
    }


    /* Testimonials */

    /* #testimonials{
    } */

    
    .swiper {
        width: 230px;
    }

    .swiper-button-prev,
    .swiper-button-next{
        display: none;

    }
    
    .swiper-slide:nth-child(1n) {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 30px;
        background-color: var(--color-icons);
    }

    .swiper-slide:nth-child(1n) h2{
        font-size: 1.5rem;
        padding-top: 2rem;
    }

    .swiper-slide:nth-child(1n) a{
        padding-bottom: 1rem;
    }


    /* Footer */
    
    #footer {
        color: var(--color-icons);
        display: flex;
        flex-direction: column;
        align-items: center;
    
    }

    #footer em{
        font-size: 1.3rem;
    }
    #footer a{
        padding: 0.5rem 0;
        font-size: 1.15rem;
    }

    #footer em{
        font-size: 0.9rem;
        font-weight: 500;
    }

    .container-footer{
        width: 97vw;
    }

    #copy{
        text-align: center;
    }

    .contato-footer{
        font-size: 1.8rem;
        grid-column: 1/3;
    }


}