/*==================================================
PROJECTS
==================================================*/

.projects{

    background:#102247;

    padding:120px 0 40px 0;

    position:relative;

    overflow:hidden;

}

.projects::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(255,255,255,.03);

    top:-220px;

    right:-180px;

}

.projects::after{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    border-radius:50%;

    background:rgba(254,144,76,.05);

    left:-150px;

    bottom:-150px;

}

/*==================================================
HEADER
==================================================*/

.projects-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    margin-bottom:70px;

    gap:40px;

}

.projects-title{

    max-width:720px;

}

.projects h2{

    color:#FFF;

    font-size:48px;

    margin:18px 0 20px;

    line-height:1.2;

}

.projects p{

    color:rgba(255,255,255,.75);

    line-height:1.9;

}

/*==================================================
BOTÃO
==================================================*/

.projects-button{

    display:flex;

    align-items:center;

    gap:12px;

    padding:18px 34px;

    border:2px solid rgba(255,255,255,.18);

    border-radius:12px;

    color:#FFF;

    transition:.35s;

    text-decoration:none;

}

.projects-button:hover{

    background:#FE904C;

    border-color:#FE904C;

    color:#FFF;

}

.projects-button i{

    transition:.35s;

}

.projects-button:hover i{

    transform:translateX(6px);

}

/*==================================================
SLIDER
==================================================*/

.projects-slider{

    position:relative;
    overflow:visible;
    height: auto;

}

.projectsSwiper{

    padding:0;

    height:500px;

}

/*==================================================
CARD
==================================================*/

.project-card{

    background:#09101f;

    position:relative;

    height:430px;

    border-radius:22px;

    overflow:hidden;

    cursor:pointer;

    transition:.35s;

}

.project-card img{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:68%;

    object-fit:cover;

    transition:.6s;

}

.project-card:hover img{

    transform:scale(1.08);

}

.project-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        to bottom,

        rgba(0,0,0,.05) 0%,

        rgba(0,0,0,.20) 35%,

        rgba(9,15,30,.95) 72%,

        #09101f 100%

    );

}

.project-content{

    position:absolute;

    left:28px;

    right:28px;

    bottom:28px;

    z-index:10;

}

.project-category{

    position:absolute;

    top:22px;

    left:22px;

    z-index:20;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:9px 18px;

    background:#FFF;

    color:#102247;

    font-size:13px;

    font-weight:700;

    border-radius:999px;

    text-transform:uppercase;

    letter-spacing:.5px;

    transition:.35s;

}

.project-card:hover .project-category{

    background:#FE904C;

    color:#FFF;

}

.project-content h3{

    color:#FFF;

    font-size:25px;

    margin-top:0;

    margin-bottom:18px;

    line-height:1.25;

}

.project-content p{

    color:rgba(255,255,255,.82);

    margin-bottom:22px;

}

.project-content a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#FFF;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.project-content a i{

    transition:.35s;

}

.project-card:hover a{

    color:#FE904C;

}

.project-card:hover a i{

    transform:translateX(6px);

}

/*==================================================
BOTÕES LATERAIS
==================================================*/

.projects-prev,
.projects-next{

    width:56px;

    height:56px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.25);

    background:rgba(16,34,71,.85);

    backdrop-filter:blur(10px);

    position:absolute;

    top:210px;

    transform:translateY(-50%);

    z-index:100;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.35s;

}


.projects-prev{

    left:-25px;

}


.projects-next{

    right:-25px;

}


.projects-prev::after,
.projects-next::after{

    display:none;

}


.projects-prev i,
.projects-next i{

    color:#FFF;

    font-size:18px;

}


.projects-prev:hover,
.projects-next:hover{

    background:#FE904C;

    border-color:#FE904C;

}

/*==================================================
PAGINAÇÃO
==================================================*/

.projects-pagination{

    margin-top:20px;

    text-align:center;

    position: relative;

}

.projects .swiper-pagination-bullet{

    width:11px;

    height:11px;

    background:#FFF;

    opacity:.35;

    transition:.35s;

}

.projects .swiper-pagination-bullet-active{

    width:28px;

    border-radius:20px;

    background:#FE904C;

    opacity:1;

}

/*==================================================
RESPONSIVO
==================================================*/

@media(max-width:1200px){

.projects-prev{

left:5px;

}

.projects-next{

right:5px;

}

}

@media(max-width:992px){

.projects{

padding:90px 0;

}

.projects-header{

flex-direction:column;

align-items:flex-start;

}

.projects h2{

font-size:38px;

}

.project-card{

height:420px;

}

}

@media(max-width:768px){

.projects h2{

font-size:38px;

}

.project-card{

height:380px;

}

.project-content{

left:22px;

right:22px;

bottom:22px;

}

.project-content h3{

font-size:24px;

}

.projects-button{

width:100%;

justify-content:center;

}

.projects-prev,
.projects-next{

display:none;

}

}


.projects .swiper-pagination {

    position: relative;

    bottom: auto;

    left: auto;

    width:100%;

    margin-top:15px;

}