@font-face {
    font-family: "Blinker";
    src: url("/public/fonts/Blinker-Bold.woff2") format('woff2'),
         url("/public/fonts/Blinker-Bold.ttf") format('truetype');
    font-display: swap;
}

@font-face {
    font-family: "Gotham";
    src:url("/public/fonts/Gotham-Book.woff2") format('woff2'),
         url("/public/fonts/Gotham-Book.ttf") format('truetype');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham";
    src:url("/public/fonts/Gotham-Bold.woff2") format('woff2'),
         url("/public/fonts/Gotham-Bold.ttf") format('truetype');
    font-weight: bold;
    font-display: swap;
}

html {
    scroll-behavior: smooth;
}

:root{
    --background-image: ;
    --fontSizeNormal: 1rem;
    --fontSizeSmall: .8rem;
    --fontSizeNormalB: 1.1rem;
    --fontSizeBig: 1.5rem;
    --fontSizeTitle: 3rem;
    --fontSizeTitleBig: 4rem;
    --fontSizeSubTitle: 2rem;
    --iconSize: 5rem;
    --socialIconSize: 2.5rem;
}

/*     Estilos largura maxima 426px     */


@media (max-width: 425px) {

    :root{
        --fontSizeNormal: 3.5vw;
        --fontSizeSmall: 3vw;
        --fontSizeNormalB: 4vw;
        --fontSizeBig: 5vw;
        --fontSizeTitle: 8vw;
        --fontSizeTitleBig: 10vw;
        --fontSizeSubTitle: 4vw;
        --iconSize: 4rem;
        --socialIconSize: 1.5rem;
    }

    #bannerBIMCorp h3{
        font-size: var(--fontSizeTitle);
        color: white;   
    }
    
    #bannerBIMCorp h2{
        color: #E73B51;
    }
    

    #bannerBIMCorp {
        text-align: center;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        flex-direction: column-reverse;
    }

    #bannerBIMCorp div{
        width: 75vw;
    }

    nav{
        padding: 0px 10px;
    }

    .arrow span{
        border-bottom: 2px solid white ;
        border-right: 2px solid white ;
    }

    #heroButtons a{
        padding: var(--fontSizeSmall);
        border: white solid .3rem;
        color: white;
    }

    #heroButtons{
        width: 90vw;
    }

    #title {
        color: white !important;
    }

    #title span{
        color: white !important;
    }
    

    #heroContent img{
        min-width: 300px;
        width: 40vw;
    }

    #conteudo a{
        display: none;
    }

    #socialMediaNavLogo{
        display: none;
    }

    #logoTextNav{
        display: none;
    }

    #maskedCarousel{
        -webkit-transition: background-image 0.2s ease-in-out;
        transition: background-image 0.2s ease-in-out;
        position: absolute;
        z-index: 0;
        width: 100vw;
        height: 100vh;
        background-position: center;
        background-image: var(--background-image);
        background-size: cover;
        opacity: .5;
    }

    #heroContent img{
        filter: brightness(0) invert(1);
    }

    #hero{
        display: grid;
        background-color: #131313;
    }

    #heroContent{
        justify-self: center;
    }

    #heroContent > *{
        color: white;
    }

    #footerBody{
        display: grid !important;
        justify-items: center;
    }

    #footerBody > *{
        margin: 10px 0px;
    }

    .card{
        width: 200px;
        height: 300px;
        border-radius: 0px 100px 0px 0px;
    }

    .card::before {
        border-radius: 0px 100px 0px 0px;
    }
    
    .card:hover::after{
        border-radius: 0px 100px 0px 0px;
    }

    #bimTitle h2{
        font-size: var(--fontSizeTitle);
        color: #E73B51;
    }
    
    #bimTitle h3{
        color: white;
        font-size: var(--fontSizeSubTitle);
    }

    .bimCard img{
        width: 40vw;
    }

    .enabled{
        width: 70vw;
    }

    @keyframes bimEnabled {
        from{
            display: flex;
            align-items: center;
            justify-items: left;
            border: none;
            background-color: transparent;
            padding: 0;
    
        }
        to{
            text-align: justify;
            align-content: space-evenly;
            justify-items: center;
            width: 70vw;
            height: fit-content;
            border: #E73B51 solid 2px;
            padding: 5% 10%;
            background-color: #462876;
            margin-left: 10px;
        }
    }
    
    @keyframes bimDisabled {
        from{
            text-align: justify;
            align-content: space-evenly;
            justify-items: center;
            width: 70vw;
            height: fit-content;
            border: #E73B51 solid 2px;
            padding: 5% 10%;
            background-color: #462876;
            margin-left: 10px;
        }
        to{
            display: flex;
            align-items: center;
            justify-items: left;
            border: none;
            background-color: transparent;
            padding: 0;
    
        }
    }

    #bimTitle, #bimOpcoes{
        width: 90vw;
        padding: 30px 0px;
    }

    #bimTitle{
        text-align: center;
    }


    #bimSection{
        flex-direction: column;
        align-items: center;
    }

    #contactBody{
        flex-direction: column;
        align-items: center;
    }

    #contactBody form, #contactDetails{
        text-align: center;
        width: 85vw;
    }

    #mensagem{
        min-width: 65vw;
        max-width: 85vw;
        min-height: 50px;
        max-height: 70px;
    }

    #quemSomos div{
        flex-direction: column;
        display: flex;
        margin: 50px 0px;
    }

    #quemSomos img{
        width: 60vw;
        margin: 5vw 0vw;
    }

    .nossaEquipe img{
        width: 45vw !important;
    }

    .last{
        flex-direction: column-reverse !important;
    }

    footer iframe{
        width: 70vw;
    }

    #footerBody img{
        width: 70vw;
    }

    #bottomFooter{
        font-size: 2vw;
    }

    .portfolioButton{
        font-size: .7rem !important;
    }

    #categoriasSection{
        flex-direction: column;
    }

}


@media (min-width: 320px) and (max-width: 375px){
    #portfolio img {    
        height: 85% !important;
        left: -95px !important;
    }

    #portfolioTitulo {
        left: 80px !important;
        top: 78% !important;
    }

}

@media (min-width: 375px) and (max-width: 425px){
    #portfolio img {    
        height: 97% !important;
        left: -95px !important;
    }

    #portfolioTitulo {
        left: 104px !important;
        top: 90% !important;
    }

}

/*     Estilos largura minima 426px     */

@media (min-width: 426px) {
    #bimTitle {
        top: 0;
        position: sticky; 
        height: fit-content;
    }

    #bimTitle, #bimOpcoes{
        width: 40%;
        padding: 100px 0px;
    }

    #heroButtons a{
        padding: var(--fontSizeNormalB);
    }

    #bannerBIMCorp div{
        width: 50%;
    }

    .bimCard img{
        width: 10vw;
    }

    .enabled{
        width: 30vw;
    }

    @keyframes bimEnabled {
        from{
            display: flex;
            align-items: center;
            justify-items: left;
            border: none;
            background-color: transparent;
            padding: 0;
    
        }
        to{
            text-align: justify;
            align-content: space-evenly;
            justify-items: center;
            width: 30vw;
            height: fit-content;
            border: #E73B51 solid 2px;
            padding: 5% 10%;
            background-color: #462876;
            margin-left: 10px;
        }
    }
    
    @keyframes bimDisabled {
        from{
            text-align: justify;
            align-content: space-evenly;
            justify-items: center;
            width: 30vw;
            height: fit-content;
            border: #E73B51 solid 2px;
            padding: 5% 10%;
            background-color: #462876;
            margin-left: 10px;
        }
        to{
            display: flex;
            align-items: center;
            justify-items: left;
            border: none;
            background-color: transparent;
            padding: 0;
    
        }
    }

    #bottomFooter{
        font-size: var(--fontSizeSmall);
    }
}

/*     Estilos largura minima 426px e maxima 768px     */


@media (min-width: 426px) and (max-width: 768px) {

    :root{
        --fontSizeNormal: .7rem;
        --fontSizeSmall: .5rem;
        --fontSizeNormalB: .7rem;
        --fontSizeBig: 2vw;
        --fontSizeTitle: 4vw;
        --fontSizeTitleBig: 10vw;
        --fontSizeSubTitle: 3vw;
        --iconSize: 4rem;
        --socialIconSize: 2rem;
    }

    #bannerBIMCorp h3{
        font-size: var(--fontSizeTitle);
        color: white;   
    }
    
    #bannerBIMCorp h2{
        color: #E73B51;
    }
    

    #bannerBIMCorp {
        text-align: center;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        flex-direction: column-reverse;
    }

    nav{
        padding: 0px 10px;
    }

    .arrow span{
        border-bottom: 2px solid white ;
        border-right: 2px solid white ;
    }

    #heroButtons a{
        border: white solid .3rem;
        color: white;
    }

    #heroButtons{
        width: 80vw;
    }

    #title{
        color: white !important;
    }

    #title span{
        color: white !important;
    }


    #heroContent img{
        min-width: 300px;
        width: 40vw;
    }

    #conteudo a{
        display: none;
    }

    #socialMediaNavLogo{
        display: none;
    }

    #logoTextNav{
        display: none;
    }

    #maskedCarousel{
        -webkit-transition: background-image 0.2s ease-in-out;
        transition: background-image 0.2s ease-in-out;
        position: absolute;
        z-index: 0;
        width: 100vw;
        height: 100vh;
        background-position: center;
        background-image: var(--background-image);
        background-size: cover;
        opacity: .5;
    }

    #heroContent img{
        filter: brightness(0) invert(1);
    }

    #hero{
        display: grid;
        background-color: #131313;
    }

    #heroContent{
        justify-self: center;
    }

    #heroContent > *{
        color: white;
    }

    #footerBody{
        display: grid !important;
        justify-items: center;
    }

    #footerBody > *{
        margin: 10px 0px;
    }

    .card{
        width: 200px;
        height: 300px;
        border-radius: 0px 100px 0px 0px;
    }

    .card::before {
        border-radius: 0px 100px 0px 0px;
    }
    
    .card:hover::after{
        border-radius: 0px 100px 0px 0px;
    }

    #bimTitle h2{
        text-align: left;
        font-size: var(--fontSizeTitle);
        color: #E73B51;
    }
    
    #bimTitle h3{
        color: white;
        font-size: var(--fontSizeSubTitle);
    }

    #contactBody{
        flex-direction: column;
        align-items: center;
    }

    #contactBody form, #contactDetails{
        width: 80%;
    }

    #contactDetails{
        height: 40vw;
    }

    #mensagem{
        min-width: 65vw;
        max-width: 65vw;
        min-height: 50px;
        max-height: 70px;
    }

    #quemSomos div{
        flex-direction: column;
        display: flex;
        margin: 50px 0px;
    }

    #quemSomos img{
        width: 60vw;
        margin: 5vw 0vw;
    }

    .nossaEquipe img{
        width: 45vw !important;
    }

    .last{
        flex-direction: column-reverse !important;
    }
    
    footer iframe{
        width: 70vw;
    }

    #footerBody img{
        width: 40vw;
    }

    #categoriasSection{
        flex-direction: column;
    }

}

/*     Estilos largura minima 768px e maxima 1024px     */


 @media (min-width: 769px) and (max-width: 1024px) {

    :root{
        --fontSizeNormal: .7rem;
        --fontSizeSmall: .5rem;
        --fontSizeNormalB: 1.5vw;
        --fontSizeBig: 1.2rem;
        --fontSizeTitle: 4vw;
        --fontSizeTitleBig: 5vw;
        --fontSizeSubTitle: 3vw;
        --iconSize: 4.2rem;
    }

    #bannerBIMCorp h3{
        font-size: var(--fontSizeTitle);
        color: #462876;   
    }
    
    #bannerBIMCorp h2{
        color: #E73B51;
    }
    

    #bannerBIMCorp::after{
        -webkit-mask-image: url(public/SVGs/bannerBIMCorp.svg);
        mask-image: url(public/SVGs/bannerBIMCorp.svg);
        -webkit-mask-size: cover;
        mask-size: cover;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: 30vw;
        mask-position: 30vw;
    }

    nav{
        padding: 0px 80px;
    }
    
    .arrow span{
        border-bottom: 2px solid #462876 ;
        border-right: 2px solid #462876 ;
    }

    #title {
        color: #462876;
    }
    
    #title span{
        color: #E73B51;
    }

    #heroButtons a{
        border: #462876 solid .3rem;
        color: #462876;
    }

    #heroButtons{   
        width: 28rem;
    }

    #maskedCarousel{
        -webkit-transition: background-image 0.2s ease-in-out;
        transition: background-image 0.2s ease-in-out;
        z-index: -1;
        width: 50vw;
        background-position: center;
        background-image: var(--background-image);
        background-size: cover;
        -webkit-mask-image: url(public/SVGs/heroMask.svg);
        mask-image: url(public/SVGs/heroMask.svg);
        -webkit-mask-size: cover;
        mask-size: cover;
        -webkit-mask-position: left;
        mask-position: left;
    }

    #hero{
        display: flex;
        justify-content: space-between;
    }

    #heroContent{
        width: 40%;
    }

    #heroContent img{
        min-width: 300px;
        width: 40vw;
    }

    .card{
        width: 250px;
        height: 300px;
        border-radius: 0px 120px 0px 0px;
    }

    .card::before {
        border-radius: 0px 120px 0px 0px;
    }
    
    .card:hover::after{
        border-radius: 0px 120px 0px 0px;
    }

    #quemSomos p{
        padding: 0px 10%;
    }

    #conteudo a{
        display: none;
    }

    #conteudo span{
        padding: 0px 10px;
    }

    #bimTitle h2{
        text-align: left;
        font-size: var(--fontSizeTitle);
        color: #E73B51;
    }
    
    #bimTitle h3{
        color: white;
        font-size: var(--fontSizeSubTitle);
    }

    #contactBody form, #contactDetails{
        width: 45%;
    }

    #mensagem{
        min-width: 40vw;
        min-height: 50px;
        max-width: 40vw;
        max-height: 40vh;
    }

    #quemSomos div{
        display: flex;
        margin: 100px 0px;
    }

    #quemSomos img{
        margin: 0px 5vw;
        width: 30vw;
    }

    .nossaEquipe img{
        width: 20vw !important;
    }

    
    footer iframe{
        width: 30vw;
    }

    #footerBody img{
        width: 20vw;
    }

    #formularioTrabalheConosco iframe{
        height: 1000px !important;
    }

 }

/*     Estilos largura minima 1025px     */


 @media (min-width: 1025px) {

    #bannerBIMCorp::after{
        -webkit-mask-image: url(public/SVGs/bannerBIMCorp.svg);
        mask-image: url(public/SVGs/bannerBIMCorp.svg);
        -webkit-mask-size: cover;
        mask-size: cover;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: 30vw;
        mask-position: 30vw;
    }

    #bannerBIMCorp h3{
        font-size: var(--fontSizeTitle);
        color: #462876;   
    }
    
    #bannerBIMCorp h2{
        color: #E73B51;
    }
    

    #maskedCarousel{
        -webkit-transition: background-image 0.2s ease-in-out;
        transition: background-image 0.2s ease-in-out;
        z-index: -1;
        width: 50vw;
        background-position: center;
        background-image: var(--background-image);
        background-size: cover;
        -webkit-mask-image: url(public/SVGs/heroMask.svg);
        mask-image: url(public/SVGs/heroMask.svg);
        -webkit-mask-size: cover;
        mask-size: cover;
        -webkit-mask-position: left;
        mask-position: left;
    }

    .arrow span{
        border-bottom: 2px solid #462876 ;
        border-right: 2px solid #462876 ;
    }

    #heroButtons a{
        border: #462876 solid .3rem;
        color: #462876;
    }

    #heroButtons{ 
        width: 28rem;
    }

    #hero{
        display: flex;
        justify-content: space-between;
    }

    #heroContent{
        width: 40%;
    }

    #heroContent img{
        min-width: 500px;
        width: 30vw;
    }

    .card{
        width: 300px;
        height: 350px;
        border-radius: 0px 170px 0px 0px;
    }

    .card::before {
        border-radius: 0px 170px 0px 0px;
    }
    
    .card:hover::after{
        border-radius: 0px 170px 0px 0px;
    }

    #quemSomos p{
        padding: 0px 10%;
    }

    nav{
        padding: 0px 100px;
    }

    #navContent{
        display: none;

    }

    #conteudo{
        min-width: 700px;
        width: 35vw;
    }

    #bimTitle h2{
        text-align: left;
        font-size: 3rem;
        color: #E73B51;
    }
    
    #bimTitle h3{
        color: white;
        font-size: 2rem;
    }

    #contactBody form, #contactDetails{
        width: 45%;
    }

    #mensagem{
        max-width: 35vw;
        min-width: 35vw;
        min-height: 50px;
    }

    #quemSomos div{
        display: flex;
        margin: 100px 0px;
    }

    #quemSomos img{   
        margin: 0px 5vw;
        width: 30vw;
    }

    .nossaEquipe img{
        width: 20vw !important;
    }

    footer iframe{
        width: 30vw;
    }

    #footerBody img{
        width: 20vw;
    }

    #formularioTrabalheConosco iframe{
        height: 900px !important;
    }

 }

*{
    margin: 0;
    padding: 0;
    font-family: "Gotham";
    font-weight: normal;
}

b{
    font-weight: bold !important;
}

h1{
    font-size: var(--fontSizeTitle);
    font-family: 'Blinker';
    color: #E73B51;
    
}

h2{
    font-size: var(--fontSizeTitle);
    font-family: 'Blinker';
    color: #E73B51;
    
}

h3{
    position: relative;
    font-family: "Blinker";
    font-size: var(--fontSizeSubTitle);
}

h4{
    position: relative;
    font-size: var(--fontSizeNormal);
}

/*       BOTÕES DE CONTATO       */
.contactButtons{
    filter: drop-shadow(0px 1px 1px #13131388);
    z-index: 999;
    display: flex;
    justify-content: space-evenly;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 150px;
    height: 60px;
}

#instagram{
    height: 60px;
    width: 60px;
    background-size:cover;
    background-image: url(public/Misc/instagram-gradient.webp);
}

#whatsapp{
    height: 60px;
    width: 60px;
    background-size:cover;
    background-image: url(public/Misc/whatsapp-green.webp);
}

#instagram:hover{
    transform: scale(1.1);
}

#whatsapp:hover{
    transform: scale(1.1);
}


/*    NAVBAR     */

nav{
    z-index: 999;
    position: fixed;
    top: 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-height: 70px;
    height: 50vh;
    min-height: 50px;
    width: 100%;
    background-color: #462876;
}

#navLogo{
    cursor: pointer;
    flex-wrap: wrap;
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: space-between;
}

#iconNav{
    width: 50px;
    fill: white;
}

#logoTextNav{
    fill: white;
    height: 40px;
}

#logoTextNav g{
    transform: translateX(-100%);
}

.logoOn g{
    animation: logoOn 1s ease forwards;
}

.logoOff g{
    animation: logoOff 1s ease forwards;

}

@keyframes logoOn {
    from{
        transform: translateX(-100%);
    }
    to{
        transform: translateX(0%);

    }
}

@keyframes logoOff {
    from{
        transform: translateX(0%);
    }
    to{
        transform: translateX(-100%);

    }
}

#conteudo{
    
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    color: white;
    text-decoration: none;
    align-content: center;
}

#conteudo a{
    font-size: var(--fontSizeSmall);
    color: white;
    text-decoration: none;
    border-radius: 3px;
}

#conteudo a:hover{
    color: #E73B51;
    animation: buttonHover .2s ease forwards;
}

#conteudo span:hover{
    color: #E73B51;
}

@keyframes buttonHover {
    from{
        padding: 10px 0px;
        border-bottom: transparent solid 1px;
        border-top: transparent solid 1px;

    }
    to{
        padding: 1px 0px;
        border-bottom: #E73B51 solid 1px;
        border-top: #E73B51 solid 1px;

    }
    
}

#conteudo span{
    width: 2rem;
    cursor: pointer;
    fill: white;
}

#conteudo :hover{
    fill:#E73B51
}

#clickOut{
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0px;
    right: 0px;
    z-index: 1;
}

#expandedNav{
    background-color: #462876EE;
    backdrop-filter: blur(2px);
    top: 70px;
    right: 0px;
    width: 70vw;
    max-width: 300px;
    height: 40vh;
    position: absolute;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    text-decoration: none;
    align-content: center;
    border-radius: 0px 0px 0px 15px;
    z-index: 999;
}

#expandedNav > *{
    padding: 10px;
}

#expandedNav div{
    display: flex;
}



#expandedNav a{
    font-size: var(--fontSizeNormalB);
    color: white;
    text-decoration: none;
    z-index: 2;
}

#expandedNav a:hover, #expandedNav span:hover{
    color: #E73B51;
}

#expandedNav span{
    z-index: 2;
    justify-self: center;
    width: 2rem;
    padding: 10px;
    cursor: pointer;
    fill: white;
}

#expandedNav :hover{
    fill:#E73B51
}


#hero{
    height: 100vh;
    width: 100%;
}


#heroContent{
    z-index: 2;
    align-self: center;
    display: grid;
    height: 60%;
    justify-items: center;
    align-items: center;

}


#title {
    font-family: 'Gotham', sans-serif;
    font-size: 3rem;
    font-weight: normal;
    text-align: center;
    line-height: 1.2;
    color: #462876;
}

#title span {
    color: #E73B51;
    display: block; 
    font-family: 'Blinker', sans-serif;
    font-size: 4rem;
}

#heroButtons{
    justify-content: space-evenly;
    display: flex;
}

#heroButtons a{
    border-radius: 1.7rem;
    text-decoration: none;
    font-family: 'Blinker';
    font-size: var(--fontSizeNormalB);
}

#heroButtons a:hover{
    color: #E73B51;
    border: #E73B51 solid .3rem;

}

.arrow {
    animation: startButton 1.5s forwards;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.arrow span {
    display: block;
    width: 15px;
    height: 15px;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.arrow span:nth-child(2) {
    animation-delay: -0.2s;
}

.arrow span:nth-child(3) {
    animation-delay: -0.4s;
}

@keyframes animate {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-15px, -15px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(45deg) translate(15px, 15px);
    }
}

.divisor{
    position: relative;
    z-index: 2;
    background-color: #462876;
    background-image: url(public/SVGs/fundo-10.svg);
    background-repeat: repeat;
    background-size: 40rem;
    background-position: center;
    max-height: 70px;
    height: 50vh;
    min-height: 50px;
    width: 100%;
}

/*    DIVISOR LIGAÇÃO      */

#divisorPhone{
    background-color: #462876;
    background-image: url(public/SVGs/fundo-10.svg);
    background-repeat: repeat;
    background-size: 40rem;
    background-position: center;
    max-height: 500px;
    height: 50vh;
    min-height: 320px;
    width: 100%;
    color: white;

    display: grid;
    justify-content: center;
    align-content: center;
    justify-items: center;
    
    position: relative;

}

#divisorPhone a, #divisorPhone span, #divisorPhone h3, #divisorPhone h4{
    margin: 5px 0px;
    color: white;
    text-decoration: none;
} 

#divisorPhone a{
    font-family: "Blinker";
    display: flex;
    font-size: var(--fontSizeNormalB);
    align-items: center;
    justify-content: center;
    border: white 4px solid;
    width: 300px;
    height: 50px;
    border-radius: 2rem;
    cursor: pointer;
}

#divisorPhone a:hover{
    background-color: white;
    color: #462876;
}

#divisorPhone span{
    font-size: 7rem;
}

#fade{
    margin-top: -300px;
    z-index: 1;
    position:absolute;
    content: '';
    background-image: linear-gradient(#fff0 0%, #fff 50%);
    width: 95vw;
    height: 300px;
}

/*     SEÇÃO SOLUÇÔES     */

#seeMoreButton:hover{
    transform: scale(1.1);
}

.cardDisabled{
    display: none !important;
}

#solucoes{
    display: grid;
    width: 100%;
    padding: 50px 0px;
    justify-items: center;
}

#cardGrid{
    justify-content: center;
    box-sizing: border-box;
    padding: 50px 0px;
    display: flex;
    flex-wrap: wrap;
    width: 80%;
}


.card{
    position: relative;
    text-decoration: none;
    margin: 50px 10px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: left;
    padding: 25px;
    display: grid;
    background-color: #E73B51;
    justify-content: space-around;
    justify-items: center;
    align-content:space-around;
    color: white;
    filter: drop-shadow(0px 2px 2px #13131388);
}

.card::before {    
    content: "";
    background-image: url(public/SVGs/icone.svg);
    background-size: cover;
    position: absolute;
    background-position: 150px 0px;
    opacity: 0.05;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
}

.card:hover::after{
    content: "";
    position: absolute;
    width: 107%;
    height: 105%;
    border: #E73B51 dashed 2px;
    top: -3%;
}

.card span{
    position: relative;
    font-size: var(--iconSize);
}

#seeMoreButton{
    cursor: pointer;
    top: -100px;
    z-index: 2;
    justify-self: center;
    font-family: "Blinker";
    font-size: var(--fontSizeNormal);
    padding: 20px 40px;
    border-radius: 30px;
    position: absolute;
    background-color: #462876;
    color: white;
}

/*    Banner BIMCORP      */

#bannerBIMCorp{
    width: 100%;
    height: 75vh;
    min-height: 500px;
    position: relative;
    display: flex;

}

#bannerBIMCorp::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #131313;
    background-image: url(public/Misc/image-engineering-objects-workplace-top-view-construction-concept-engineering-tools-vintage-tone-retro-filter-effect-soft-focus-selective-focus.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    top: 0px;
    z-index: -1;
}

#bannerBIMCorp div{
    display: grid;
    justify-content: center;
    align-content: center;
    position: relative;
}

#bannerL img{
    position: absolute;
    opacity: 0.05;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#bannerR img {
    z-index: 2;
    width: 100%;
    filter: invert(1);
}

#bannerBIMCorp h2{
    font-size: var(--fontSizeTitle);
}

#bimSection{
    background-color: #462876;
    background-image: url(public/SVGs/fundo-10.svg);
    background-repeat: repeat;
    background-size: 40rem;
    background-position: center;
    display: flex;
    
    justify-content: center;
}

#bimOpcoes{
    display: grid;
    justify-items: start;
}

.bimCard{
    display: grid;
    border-radius: 15px;
    transition: all 1s;
    border: #E73B51 solid 0px;
}

.bimCard img{
    cursor: pointer;
    max-width: 100px;
    min-width: 20px;
}

.bimCard img:hover{
    transform: scale(1.05);
}

.enabled > * {
    margin: 10px 0px;
    text-decoration: none;
}

.enabled{
    text-align: justify;
    align-content: space-evenly;
    justify-items: center;
    height: fit-content;
    border: #E73B51 solid 2px;
    padding: 5% 10%;
    background-color: #462876;
    margin-left: 10px;
}

.disabled{
    display: flex;
    align-items: center;
    justify-items: left;
}

.bimCard h2{
    color: white;
    font-size: var(--fontSizeBig);
}

.bimCard p{
    color: white;
    font-family: "Gotham";
    font-size: var(--fontSizeSmall);
}

.bimCard a{
    font-size: var(--fontSizeSmall);
    cursor: pointer;
    color: #E73B51;
    padding: 3% 10%;
    border: #E73B51 solid 3px;
    border-radius: 30px;
}

.bimCard a:hover{
    color: #462876;
    background-color: #E73B51;
}

/*     Formulario de Contato     */

#contatoForm{
    justify-self: center;
    position: relative;
    display: grid;
    padding: 100px 0px;
    justify-items: center;
}

#contatoForm h2{
    color: #462876;
}

#contatoForm h4{
    color: #462876;
}

#contactBody{
    justify-content: space-between;
    display: flex;
    margin: 100px 0px;
}

#contactBody form{
    display: grid;
    height: 400px; 
}

#nome, #email, #telefone{
    text-indent: 20px;
    border-bottom: #462876 1px solid;
    border-top: none;
    border-left: none;
    border-right: none;
    color: #462876;
    margin: 10px 0px;
    min-width: 35vw;
    min-height: 50px;
    font-size: var(--fontSizeNormal);
}

#nome:focus, #email:focus, #telefone:focus{
    background-color: #46287622;
    outline: none;
    border-radius: 15px;
}

#nome::placeholder, #email::placeholder, #telefone::placeholder{
    font-size: var(--fontSizeNormal);
    color: #462876;
}

#mensagem{
    font-size: var(--fontSizeNormal);
    padding: 20px 0px;
    text-indent: 20px;
    line-break: normal;
    border-bottom: #462876 1px solid;
    border-top: none;
    border-left: none;
    border-right: none;
}

#mensagem::placeholder{
    font-size: var(--fontSizeNormal);
    color: #462876;
}

#mensagem:focus{
    background-color: #46287622;
    outline: none;
    border-radius: 15px;
}

#enviar{
    cursor: pointer;
    background: none;
    border: #462876 solid 2px;
    border-radius: 15px;
    width: 50%;
    height: var(--socialIconSize);
    margin: 20px 0px;
    justify-self: center;
    color: #462876;
    font-size: var(--fontSizeNormal);
}

#enviar:hover{
    background-color: #462876;
    color: white;
}

#contactDetails{
    display: grid;
    border: #462876 1px solid;
    padding: 10px;
    border-radius: 1.3rem;   
    align-content: space-evenly;
    justify-content: center; 
}

#contactDetails h3{
    font-size: var(--fontSizeBig);
    color: #462876;
    justify-self: center;
}

#contactDetails h4{
    font-size: var(--fontSizeNormal);
    color: #462876;
    justify-self: center;
}

#contactDetails div{
    display: flex;
}

#socialMediaGroup{
    flex-wrap: wrap;
    align-items: center;
    width: 50%;
    height: calc(var(--socialIconSize) + 10px);
    justify-self: center;
    justify-content: space-between;
}

.socialMediaLogo{
    cursor: pointer;
    fill: #462876;
    width: var(--socialIconSize);
    height: var(--socialIconSize);
}

.socialMediaLogo:hover{
    fill: #E73B51;
}

.dadosContato{
    width: 50%;
    flex-direction: column;
    color: #462876;
    text-align: center;
}

.dadosContato p{
    font-size: var(--fontSizeNormal);
}

.dadosContato h3{
    font-size: var(--fontSizeBig);
}

#contactDetails hr{
    border: #462876 1px solid;
    justify-self: center;
}

/*     Seção Quem Somos     */

#quemSomos{
    position: relative;
    display: grid;
    justify-items: center;
    justify-self: center;
    padding: 5vw;
}

#quemSomos::before{
    content: ' ';
    position: absolute;
    width: 100%;
    height: 75%;
    background-color: #0001;
    -webkit-mask-image: url(public/SVGs/icone.svg);
    mask-image: url(public/SVGs/icone.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 50% 100%;
    mask-size: 50% 100%;
    -webkit-mask-position: 75vw 0px;
    mask-position: 75vw 0px;
}


#quemSomos div{
    display: flex;
}

#quemSomos img{
    align-self: center;
}

#quemSomosPhotos{
    border-radius: 20px 20px 20px 0px;
}

#quemSomos div p{
    color: #462876;
    align-self: center;
    text-align: justify;
    font-size: var(--fontSizeNormalB);
}

#quemSomosValores{
    color: #462876;
    align-self: center;
    text-align: center;
    font-size: var(--fontSizeSmall);
}

.nossaEquipe img{
    border-radius: 15px;
}

.nossaEquipe g{
    justify-items: center;
    display: grid;
    color: #462876;
    align-content: center;
}


footer{


    color: white;
    fill: white;

    background-color: #462876;
    background-image: url(public/SVGs/fundo-10.svg);
    background-repeat: repeat;
    background-size: 40rem;
    background-position: center;
    
    height: fit-content;
    width: 100%;
    display: grid;
    justify-items:center;
    align-items: center;
    align-content: space-between;
    padding: 50px 0px ;
    position: relative;
}

footer h3{
    font-size: var(--fontSizeNormal);

}

footer a{
    text-decoration: none;
    color: white;
    cursor: pointer;
}

footer a:hover{
    color: #E73B51;
}

#footerBody img{
    filter: invert(1);
}

footer iframe{
    border-radius: 15px;
    min-height: 200px;
    height: 30vh;
}

#footerBody{
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
}

#footerBody div{
    font-size: var(--fontSizeSmall);

    align-self: center;
    height: 20vh;
    margin: 0px 1vw;
    justify-content: space-evenly;
    display: flex;
}

#footerBody div div{
    display: grid;
}

.socialMediaLogoFooter svg{
    height: 2rem;
}

.socialMediaLogoFooter:hover{
    fill: #E73B51;
    cursor: pointer;
}

#bottomFooter{
    position: absolute;
    display: flex;
    flex-direction: row;
    bottom: 20px;
}

#bottomFooter p, #bottomFooter a{
    margin: 1px;
}




/*     ESTILOS PAGINA SOLUCOES     */

@media (max-width: 768px){
    #solucoesHero{
        display: grid;
    }

    #solucoesHero div{
        width: 80%;
    }

    #solucoesHero img{
        width: 60vw;
    }

    #solucoesHeroClientes{
        display: grid;
    }

    #solucoesHeroClientes div{
        width: 80%;
    }

    #solucoesHeroClientes #img{
        width: 60vw;
    }

    #solucoesSobre div{
        width: 80%;
        z-index: 1;
    }

    #solucoesSobre{
        flex-direction: column;
    }

    #youtubeEmbed{
        width: 70%;
        height: 40vw;
        margin-bottom: 50px;
    }
}

@media (min-width: 769px) {
    #solucoesHero{
        display: flex;
    }

    #solucoesHero div{
        width: 40%;
    }

    #solucoesHero img{
        width: 30vw;
    }
    
    #solucoesHeroClientes{
        display: flex;
    }

    #solucoesHeroClientes div{
        width: 40%;
    }

    #solucoesHeroClientes #img{
        width: 30vw;
    }

    #solucoesSobre div{
        width: 30%;
        z-index: 1;
    }

    #youtubeEmbed{
        width: 40%;
        height: 22vw;
    }
}


#solucoesHero{
    margin-top: 70px;
    height: 50vh;
    min-height: 500px;
    background-color: #462876;
    background-image: url(public/SVGs/fundo-10.svg);
    background-repeat: repeat;
    background-size: 40rem;
    background-position: center;
    align-items: center;
    justify-content: center;

}

#solucoesHero div{
    display: grid;
    justify-content: center;
    justify-self: center;
}

#solucoesHero img{
    filter: invert(1);
}

#solucoesHero h2{
    font-size: var(--fontSizeSubTitle);
    color: white;
    text-align: center;
    font-family: "Blinker";
    margin-bottom: 10px;
}

#solucoesHero h3{
    text-align: justify;
    font-family: "Gotham";
    font-size: var(--fontSizeNormal);
    color: white;
}

#solucoesHeroClientes{
    margin-top: 70px;
    height: 50vh;
    min-height: 500px;
    background-color: white;
    background-position: center;
    align-items: center;
    justify-content: center;

}

#solucoesHeroClientes div{
    display: grid;
    justify-self: center;
}

#solucoesHeroClientes h2{
    font-size: var(--fontSizeSubTitle);
    color: #462876;
    text-align: center;
    font-family: "Blinker";
    margin-bottom: 10px;
}

#solucoesHeroClientes h3{
    text-align: justify;
    font-family: "Gotham";
    font-size: var(--fontSizeNormal);
    color: #462876;
}

#solucoesDetalhes{
    display: grid;
}

#solucoesSobre{
    position: relative;
    padding: 50px 0px;
    justify-content: space-evenly;
    justify-self: center;
    display: flex;
    margin: 10vh 0;
    background-color: #E73B51;
    width: 95vw;
    height: fit-content;
    color: white;
    justify-items: center;
    align-items: center;
    border-radius: 0 10vw 0 0;
}

#solucoesSobre div{
    display: grid;
}

#solucoesSobre div > *{
    margin: 3vh 0px;
}

#solucoesButton{
    text-decoration: none;
    position: relative;
    bottom: 0px;
    justify-self: center;
    align-self: center;
    padding: 10px 20px;
    background-color: white;
    color: #E73B51;
    border: #fff 1px solid;
    border-radius: 15px;
}

#solucoesButton:hover{
    background-color: transparent;
    color: white;
}


#solucoesTitle{
    text-align: center;
    font-size: var(--fontSizeSubTitle);
    color: white;
    margin-bottom: 10px;
}

#solucoesP{
    font-size: var(--fontSizeNormal);
    text-align: justify;
}

#youtubeEmbed{
    z-index: 2;
    border-radius: 15px;
    filter: drop-shadow( 2px 2px 2px #000A);
}

#iconUpRight{
    position: absolute;
    top: 5%;
    right: 5%;
    font-size: calc(var(--socialIconSize) * 1.5);
}

#solucoesSobre::before {
    content: ' ';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #0001;
    -webkit-mask-image: url(public/SVGs/icone.svg);
    mask-image: url(public/SVGs/icone.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 75%;
    mask-size: 75%;
    -webkit-mask-position: 250% 50%;
    mask-position: 250% 50%;
    border-radius: 0 10vw 0 0;
    z-index: 0;
}

#arrowBack{
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 10px;
}

#arrowNext{
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 10px;
}



@media (max-width: 768px) {
    #previousImgSolucoes{
        display: none;
    }
    
    #currentImgSolucoes{
        width: 80vw;
    }
    
    #nextImgSolucoes{
        display: none;
    }
}

@media (min-width: 769px) {
    #previousImgSolucoes{
        transform: translateX(75%);
        width: 50vw;
    }
    
    #currentImgSolucoes{
        width: 70vw;
    }
    
    #nextImgSolucoes{
        transform: translateX(-75%);
        width: 50vw;
    }
}

#carouselSolucoesImg{
    flex-direction: column;
    display: flex;
    align-items: center;
    height: fit-content;
    min-height: 500px;

}

#carouselSolucoesImg h1{
    color: #462876;
}

#carouselSolucoesImg h4{
    color: #462876;
}

#carouselSolucoes{
    padding: 10vh 0px;
    display: flex;
    width: 100%;
    justify-self: center;
    align-items: center;
    justify-content: center;
    position: relative;
}


#previousImgSolucoes{
    height:initial;
    filter: blur(2px);
    border-radius: 15px;
}

#currentImgSolucoes{
    height:initial;
    filter: drop-shadow(0px 0px 2px #000);
    border-radius: 15px;
    z-index: 1;
}

#nextImgSolucoes{
    height:initial;
    filter: blur(2px);
    border-radius: 15px;
}



/*     PAGINA DE CONTATO      */

@media (max-width: 768px) {
    #previousImg{
        display: none;
    }
    
    #currentImg{
        width: 80vw;
    }
    
    #nextImg{
        display: none;
    }
}

@media (min-width: 769px) {
    #previousImg{
        transform: translateX(75%);
        width: 50vw;
    }
    
    #currentImg{
        width: 70vw;
    }
    
    #nextImg{
        transform: translateX(-75%);
        width: 50vw;
    }
}

#escritorio{
    flex-direction: column;
    display: flex;
    align-items: center;
    height: fit-content;
    min-height: 500px;

}

#escritorio h1{
    color: #462876;
}

#escritorio h4{
    color: #462876;
}

#carousel{
    padding: 10vh 0px;
    display: flex;
    width: 100%;
    justify-self: center;
    align-items: center;
    justify-content: center;
    position: relative;
}


#previousImg{
    height:initial;
    filter: blur(2px);
    border-radius: 15px;
}

#currentImg{
    filter: drop-shadow(0px 0px 2px #000);
    height:initial;
    border-radius: 15px;
    z-index: 1;
}

#nextImg{
    height:initial;
    filter: blur(2px);
    border-radius: 15px;
}

#arrowBackCarousel{
    z-index: 2;
    color: white;
    filter: drop-shadow(1px 1px 2px #000);
    font-size: var(--fontSizeTitle);
    position: absolute;
    top: 45%;
    left: 20%;
}

#arrowNextCarousel{
    cursor: pointer;
    z-index: 2;
    color: white;
    filter: drop-shadow(1px 1px 2px #000);
    font-size: var(--fontSizeTitle);
    position: absolute;
    top: 45%;
    right: 20%;
}

#arrowBackCarousel:hover, #arrowNextCarousel:hover{
    color: #E73B51;
}

.conteudoClientes{
    width: 150px;
    height: 150px;
    border-radius: 10px;
    margin: 10px;
    justify-content: center;
    align-content: center;
    display: grid;
}

.conteudoClientes img{
    width: 80%;
    justify-self: center;
    align-self: center;
}

#ClienteseParceiros{
    text-align: center;
    display: grid;
    margin-top: 70px;
    padding-bottom: 100px;
    height: fit-content;
    min-height: 500px;
    align-items: center;
    justify-content: center;
    background-color: #462876;
    background-image: url(public/SVGs/fundo-10.svg);
    background-repeat: repeat;
    background-size: 40rem;
    background-position: center;
}

#gridClientes{
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    justify-self: center;
    align-self: center;
    justify-content: center;
}

#formularioTrabalheConosco{
    height: fit-content;
    display: grid;
}

#formularioTrabalheConosco iframe{
    max-width: 90vw;
    justify-self: center;
    align-self: center;
    padding: 70px 0px 70px 0px;
    width: 100%;
    height: 1050px;
}

.portfolioCard{
    object-fit: cover;
    object-position: center;
    position: relative;   
    width: 300px; 
    height: 500px; 
}

.portfolioCard img{
    object-fit: cover;
    object-position: center;
}

.portfolioCard:hover{
    opacity: 0.9;
    cursor: pointer;
}

#portfolio{
    width: 100%;
    padding: 5% 10% 5% 10%;
    box-sizing: border-box;
    background-color: #462876;
    background-image: url(public/SVGs/fundo-10.svg);
    background-repeat: repeat;
    background-size: 40rem;
    background-position: center;
}

#portfolio h3{
    font-size: 1.2rem;
    color: white;
    font-weight: 400;
    position: absolute;
    left: 119px;
    top: 92%;
}

#portfolio h2{
    color: white;
    font-weight: 500;
}

#portfolio img{
    pointer-events: none;
    position: absolute;
    left: -100px;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: left;
    mask-position: left;
    height: 100%;
    -webkit-mask-image: url(/public/SVGs/card-portfolio.svg); 
    mask-image: url(/public/SVGs/card-portfolio.svg);
}

#categoriasSection{
    flex-wrap: wrap; 
    text-wrap-mode: nowrap;
    margin: 20px 0px;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    border-bottom: 2px solid white;
    padding: 10px;
    
}

#gridPortfolio{
    height: fit-content;
    width: 100%;
}

#gridPortfolio a{
    margin: 5px;
}

.portfolioButton{
    font-weight: 400;
    font-size: 1.2rem;
    padding: 20px 40px;
    box-sizing: border-box;
    color: white;
}

.portfolioButton:hover{
    background-color: #FFF3;
    border-radius: 0px 10px 0px 10px;
    cursor: pointer;
}

#portfolioIcone{
    right: 0px; 
    height: 60px; 
    width: 60px; 
    position: absolute;
    top: 20px;
    right: 10px;
    fill: white;
}

.portfolioGrid{
    display: flex;
    width: 100%;
    height: fit-content;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

#portfolioPage{
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    padding: 100px 10%;
}

#portfolioContent{
    padding: 50px 0px;
    display: flex;
    justify-content: space-evenly;
}

#portfolioContent img{
    width: 40%;
    border-radius: 15px;
    box-shadow: inset 5px 5px 5px black;
}

#portfolioContent div{
    width: 40%;
    color: #462876;
    font-size: 1.2rem;
}

#portfolioContent div div{
    margin-bottom: 10px;
    width: 100%;
}

#portfolioContent div span{
    margin-right: 10px;
}

@media (max-width: 768px) {
    #portfolioContent{
        flex-direction: column;
        align-items: center;
    }

    #portfolioContent img{
        width: 80% !important;
        margin-bottom: 10px;
    }
    
    #portfolioContent div{
        width: 80% !important;
    }

    #portfolioContent div div{
        margin-bottom: 10px;
        width: 100%;
    }

    #portfolioContent div{
        font-size: 0.9rem !important;
    }
    
    
}

#portfolioPage {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
    box-sizing: border-box;
}

.back-link {
    color: #555;
    text-decoration: none;
    margin-bottom: 20px;
    display: inline-block;
}

.header-portfolio h1 {
    color: #462876;
    font-weight: 500;
    font-size: 2.5rem;
    margin-bottom: 30px;
}

.portfolio-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
}

.info-block {
    width: 60%;
    color: #462876;
    font-size: 1.1rem;
}

.info-block div {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.info-block .description-block p {
    margin: 5px 0 0 0;
    text-align: justify;
}

.info-block span.material-symbols-outlined {
    margin-right: 10px;
}

.image-gallery {
    width: 100%;
}

.btn-3d {
    display: inline-block;
    align-self: end;
    background-color: #462876;
    border: solid 1px #462876;
    color: white;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    margin-top: 20px;
    transition: background-color 0.3s;
    left: 0;
}

.btn-3d:hover {
    background-color: #3c1d6d;
}

@media (max-width: 728px) {
    .btn-3d {
        align-self: normal;
    }
}

.static-gallery {
    display: flex;
    gap: 15px;
}
.static-gallery .gallery-image {
    width: calc(33.333% - 10px);
    height: 100%;
    object-fit: contain;
    border-radius: 10px;
}

.swiper {
    width: 100%;
    height: 400px;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%; 
    height: 100%;
    object-fit: contain; 
    border-radius: 5px;
}

.swiper-button-next, .swiper-button-prev {
    color: #462876 !important;
}

@media (max-width: 900px) {
    .portfolio-details {
        flex-direction: column;
    }

    .info-block, .image-gallery {
        width: 100%;
    }
}

.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-container.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    position: relative;
    background: #fff;
    padding: 8px;
    border-radius: 10px;
    width: 90%;
    max-width: 900px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.close-modal {
    position: absolute;
    top: -15px;
    right: -15px;
    background: #462876;
    color: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 24px;
    line-height: 35px;
    text-align: center;
    cursor: pointer;
    z-index: 1010;
}

.modal-content .swiper-main {
    width: 100%;
    height: 70vh;
    margin-bottom: 10px;
}

.swiper-wrapper {
    justify-content: space-evenly;
}

.modal-content .swiper-thumbs {
    height: 12vh;
    box-sizing: border-box;
    padding: 10px 0;
}

.modal-content .swiper-thumbs .swiper-slide {
    width: fit-content;
    height: 100%;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.3s;
}

.modal-content .swiper-thumbs .swiper-slide:hover {
    opacity: 0.8;
}

.modal-content .swiper-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}

.project-image-clickable {
    cursor: pointer;
}