@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

body{
	font-family: 'Poppins', sans-serif;
	background-color: #1b1b1b;
	color: white;
}
#mainHeader{
	position:relative;
    inset:0;
    height:100vh;
    display:flex;
    flex-direction:column;

    justify-content:space-between;
	background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
	transition:.45s ease;

    z-index:1000;
	
	background-color: rgb(10,10,10);
    
	transition:
        height .45s ease,
        background-color .45s ease;
}

#headerBackground{
    position:absolute;
    inset:0;

    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;

    z-index:0;
	
	opacity:.45;
}

#headerContent{
    flex:1;
    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    gap:25px;

    transition:
        opacity .4s,
        transform .4s;
}

#mobileContactButton, #contactOverlay {
    display: none;
}

#topContacts{
	margin-bottom: 30px;
}
.topContact{
	text-decoration: none;
	font-size: 18pt;
	color: white;
	margin: 12px;
}
.topContact:hover{
	opacity:.8;
}
/*BARRA DE NAVEGAÇÃO*/

#navMenu {

    position: absolute;
	
	width:100%;
	box-sizing: border-box;
	
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 100; 
    /*z-index: 20;*/
	
	/*transition:.35s;*/
	background:rgba(20,20,20);	
}

#navLinks {

    display: flex;

    justify-content: flex-start;

    align-items: center;

    gap: 10px;

}
.navButton{
	display: flex;
	min-height:35px;
	text-decoration: none;
	color: white;
	font-weight: bolder;
	align-items: center;
	padding:5px 25px;
	margin:2px;
}
.navButton:hover{
	color: #026dfe;
}

#mobileMenuButton {
    display: none;
}
#mobileNavBar {
    display: none;
}
#mobileCloseButton {
    display: none;
}

/*---TRANSIÇÕES---*/
.contentSection{
    opacity:0;
    transform:translateY(40px);
    transition:
        opacity .7s,
        transform .7s;
}
.contentSection.visible{
    opacity:1;
    transform:none;

}

/* ----- CONTEÚDOS DA PÁGINA ----- */

main{
    width: 100%;
	justify-items: center;
}
section{
	/*min-height: 250px;*/
	max-width: 1028px;
	/*background-color: none;*/
	margin-top: 64px;
	margin-bottom: 64px;
}
#pageContent{
	
}

#address {

    background-size: cover;
    background-position: center;
}

.heroBanner{
	/*min-height: 600px;*/
	max-width: 1028px;
	max-height: 720px;
}

/* ==========================================
   IMAGE SECTIONS
   ========================================== */

.imageSection {

    position: relative;

    width: 100%;

    min-height: 450px;

    display: flex;

    align-items: stretch;

    justify-content: flex-start;

    /*padding: 40px 6%;*/

    box-sizing: border-box;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    overflow: hidden;

}

.imageSection::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 1;

    background:
        linear-gradient(
            to right,
            #1b1b1b 0%,
            transparent 10%,
            transparent 90%,
            #1b1b1b 100%
        ),
        linear-gradient(
            to bottom,
            #1b1b1b 0%,
            transparent 10%,
            transparent 90%,
            #1b1b1b 100%
        );

}

/* ==========================================
   SECTION CONTENT
   ========================================== */

.sectionContent {

    position: relative;

    z-index: 2;

    width: 100%;

    min-height: 370px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    text-align: left;

}


/* ==========================================
   SECTION TITLE
   ========================================== */

.sectionContent h2 {

    margin: 0;

}


/* ==========================================
   SECTION DESCRIPTION
   ========================================== */

.sectionContent p {

    margin-top: auto;

    margin-bottom: 15px;

    max-width: 700px;

}


/* ==========================================
   SECTION BUTTON
   ========================================== */

.sectionContent .contentButton {

    margin-top: 0;

}

.contentButton{
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	font-size:14pt;
	font-weight: bolder;
	color: white;
	padding: 5px;
	margin: 2px;
	border: 2px solid white;
	border-radius:3px;
	transition:.4s;
}
.contentButton:hover{
	background-color: #026dfe;
	transition:.4s;
}
#serviceListContainer {

    display: flex;

    width: 100%;

    justify-content: center;

}


#servicesList {

    display: grid;

    width: 85%;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;

}


/* ==========================================
   SERVICE ARTICLE
   ========================================== */

.serviceArticle {

    width: 100%;
    max-width: 500px;

    justify-self: center;

    overflow: hidden;

    

    border-radius: 8px;
	padding: 5px;
	margin: 5px;
}
.serviceArticle:hover{
	
	/*background-color: rgb(50,50,50);*/
	opacity: .60;
	transition: .5s
}

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

.serviceHeader {

    display: flex;

    align-items: center;

    gap: 15px;

    cursor: pointer;

}


/* ==========================================
   SERVICE ICON
   ========================================== */

.serviceIcon {

    width: 60px;
    height: 60px;

    object-fit: contain;

    background-color: #026dfe;

    border-radius: 5px;

    padding: 5px;

}


/* ==========================================
   SERVICE DESCRIPTION
   ========================================== */

.serviceDescription {

    max-height: 0;

    opacity: 0;

    overflow: hidden;

    padding: 0 20px;

    transition:
        max-height 0.4s ease,
        opacity 0.3s ease,
        padding 0.4s ease;

}


/* ==========================================
   OPEN SERVICE
   ========================================== */

.serviceArticle.open .serviceDescription {

    max-height: 500px;

    opacity: 1;

    padding: 15px 20px 20px;

}
/* ==========================================
   NEWS LIST
   ========================================== */

#newsList {

    display: flex;

    gap: 20px;

    width: 100%;

    overflow-x: auto;

    overflow-y: hidden;

    scroll-behavior: smooth;

    scroll-snap-type: x mandatory;

    padding-bottom: 10px;
	
	scrollbar-width: thin;

}

#newsList::-webkit-scrollbar {
    height: 6px;
}

#newsList::-webkit-scrollbar-thumb {
    border-radius: 10px;
}


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

.newsArticle {

    position: relative;

    flex: 0 0 calc(
        (100% - 40px) / 3
    );

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 10px;

    cursor: pointer;

    scroll-snap-align: start;
	
	background-color: rgb(50,50,50); /*Caso não haja imagem define os limites do bloco*/

}


/* ==========================================
   NEWS IMAGE
   ========================================== */

.newsArticleImage {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

}


/* ==========================================
   NEWS OVERLAY
   ========================================== */

.newsArticleOverlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 15px;

    color: white;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.65),
            transparent 30%,
            transparent 55%,
            rgba(0,0,0,0.8)
        );

}


/* ==========================================
   NEWS DATE
   ========================================== */

.newsArticleDate {

    font-size: 0.9rem;

    font-weight: 500;

}


/* ==========================================
   NEWS TITLE
   ========================================== */

.newsArticleTitle {

    margin: 0;

    font-size: 1.2rem;

    line-height: 1.2;

}
/* ==========================================
   NEWS POPUP
   ========================================== */

.contentPopup {

    position: fixed;

    inset: 0;

    z-index: 1000;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;

}


.contentPopup.open {

    display: flex;

}


.popupOverlay {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.8);

}


.popupContent {

    position: relative;

    z-index: 2;

    width: min(900px, 100%);

    max-height: 90vh;

    overflow-y: auto;

    background: rgb(10,10,10);

    border-radius: 12px;

}


.popupNewsImage {

    display: block;

    width: 100%;

    max-height: 500px;

    object-fit: contain;

    background: #111;

}


.popupNewsInfo {

    padding: 25px;

}


.popupNewsDate {

    display: block;

    margin-bottom: 8px;

    font-size: 0.9rem;

}


.popupNewsInfo h2 {

    margin-top: 0;

}


.popupClose {

    position: absolute;

    top: 10px;

    right: 10px;

    z-index: 3;

    width: 40px;

    height: 40px;

    border: none;

    border-radius: 50%;

    font-size: 28px;

    cursor: pointer;

}
/* ==========================================
   PARTNERSHIPS
   ========================================== */

#partnersList {

    display: flex;

    flex-direction: column;

    gap: 20px;

    width: 100%;

}


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

.partnershipArticle {

    display: flex;

    align-items: center;

    gap: 30px;

    width: 100%;

    box-sizing: border-box;

    padding: 20px;

    border-radius: 10px;

    background: rgb(50,50,50);

    color: white;

}


/* ==========================================
   IMAGE / LOGO
   ========================================== */

.partnershipImage {

    flex: 0 0 220px;

    width: 220px;

    height: 180px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}


.partnershipImage img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

}


/* ==========================================
   CONTENT
   ========================================== */

.partnershipContent {

    flex: 1;

    min-width: 0;

}


.partnershipContent h3 {

    margin-top: 0;

    margin-bottom: 12px;

}


.partnershipContent p {

    margin: 0 0 15px;

    line-height: 1.5;

}


/* ==========================================
   LINKS
   ========================================== */

.partnershipLink {

    display: inline-block;

    margin-right: 15px;

    margin-bottom: 5px;

    color: white;

    text-decoration: none;

}


.partnershipLink:hover {

    color: #026dfe;

}
/* ==========================================
   GALLERY
   ========================================== */

#photoList {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 15px;

    width: 100%;

}


.galleryArticle {

    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    border-radius: 10px;

    cursor: pointer;
	
	background-color: rgb(50,50,50);

}


.galleryArticle img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transition: transform 0.3s ease;

}


.galleryArticle:hover img {

    transform: scale(1.03);

}

/* ==========================================
   GALLERY POPUP
   ========================================== */

#galleryPopup {

    display: none;

    position: fixed;

    inset: 0;

    z-index: 1000;

    align-items: center;

    justify-content: center;

    padding: 20px;

}


#galleryPopup.open {

    display: flex;

}

/* ==========================================
   GALLERY POPUP OVERLAY
   ========================================== */

#galleryPopup .popupOverlay {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.85);

    z-index: 1;

}


/* ==========================================
   GALLERY POPUP CONTENT
   ========================================== */

#galleryPopup .galleryPopupContent {

    position: relative;

    z-index: 2;

    width: min(1200px, 95vw);

    height: min(90vh, 900px);

    display: flex;

    align-items: center;

    justify-content: center;

}


/* ==========================================
   GALLERY POPUP IMAGE
   ========================================== */

#galleryPopup #popupGalleryImage {

    display: block;

    max-width: 100%;

    max-height: 90vh;

    width: auto;

    height: auto;

    object-fit: contain;

}

/*-----------------FOOTER----------*/
footer{
	display: flex;
	justify-content: center;
	min-height: 100px;
	background-color: #000915
}
.footerLink{
	text-decoration: none;
	font-size:14pt;
	font-weight: bolder;
	color: white;
}
.footerLink:hover{
	opacity:.7;
}

/*------------------Tablet-------------------*/

@media (max-width: 900px) {

    .newsArticle {

        flex: 0 0 calc(
            (100% - 20px) / 2
        );

    }

}

/*------------------Mobile-------------------*/

@media (max-width: 768px) {
/*Página*/

section{

	margin-top: 30px;
	margin-bottom: 30px;
	
}
h1{
	text-align: center;
}

    /* ==========================================
       MOBILE NAVIGATION
       ========================================== */

    #navMenu {

        position: absolute;

        left: 0;
        right: 0;

        bottom: 0;
        top: auto;

        width: 100%;

        height: 55px;

        z-index: 1000;

    }
	/* ----- CONTACTOS NO MOBILE ----- */

#topContacts {
    display: none;
}

 #mobileContactButton {

        display: flex;

        position: absolute;

        top: 15px;
        right: 15px;

        width: 48px;
        height: 48px;

        align-items: center;
        justify-content: center;

        padding: 10px;

        border: none;
        border-radius: 8px;

        background: #026dfe;

        cursor: pointer;

        z-index: 50;

    }


    #mobileContactButton img {

        width: 100%;
        height: 100%;

        object-fit: contain;

    }
	
	#contactOverlay {

    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background: rgba(0,0,0,0.65);

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s ease;

    z-index: 2000;

}


#contactOverlay.open {

    opacity: 1;

    pointer-events: auto;

}


#contactPanel {

    position: relative;

    width: min(90%, 450px);

    padding: 35px 25px;

    box-sizing: border-box;

    border-radius: 12px;

    background: rgb(20,20,20);

    color: white;

    transform: scale(0.95);

    transition: transform 0.3s ease;

}


#contactOverlay.open #contactPanel {

    transform: scale(1);

}


#closeContactButton {

    position: absolute;

    top: 10px;
    right: 10px;

    width: 40px;
    height: 40px;

    border: none;

    background: transparent;

    color: white;

    font-size: 28px;

    cursor: pointer;

}


.mobileContacts {

    display: flex;

    flex-direction: column;

    gap: 15px;

}


.mobileContact {

    color: white;

    text-decoration: none;

    padding: 12px;

}


.mobileContact:hover {

    opacity: 0.8;

}

    /* ------------------------------------------
       MOBILE STICKY BAR
       ------------------------------------------ */

    #mobileNavBar {

        display: flex;

        align-items: center;
        justify-content: flex-start;

        width: 100%;
        height: 55px;

        box-sizing: border-box;

        background: rgba(20,20,20);

    }


    #mobileMenuButton {

        display: flex;

        align-items: center;
        justify-content: center;

        width: 55px;
        height: 55px;

        border: none;

        background: transparent;

        color: white;

        cursor: pointer;

        font-size: 26px;

    }
	#mobileCloseButton {

    display: flex;

    align-items: center;
    justify-content: center;

    position: absolute;

    top: 5px;
    right: 10px;

    width: 45px;
    height: 45px;

    border: none;

    background: transparent;

    color: white;

    font-size: 28px;

    cursor: pointer;

    z-index: 3;

}

    /* ------------------------------------------
       MOBILE LINKS
       ------------------------------------------ */

    #navLinks {

        position: fixed;

        top: 55px;
        left: 0;

        width: 100%;
        height: calc(100vh - 55px);

        display: flex;

        flex-direction: column;

        justify-content: flex-start;
        align-items: stretch;

        gap: 0;

        padding: 55px 0 10px;

        box-sizing: border-box;

        background: rgba(20,20,20);

        transform: translateX(-100%);

        transition: transform 0.3s ease;

        overflow-y: auto;

        z-index: 1001;

    }


    #navMenu.mobileOpen #navLinks {

        transform: translateX(0);

    }


    /* ------------------------------------------
       MOBILE BUTTONS
       ------------------------------------------ */

    #navLinks .navButton {

        width: 100%;

        box-sizing: border-box;

        text-align: left;

        padding: 16px 25px;

    }


    /* ------------------------------------------
       OVERLAY
       ------------------------------------------ */

    #mobileMenuOverlay {

        position: fixed;

        inset: 0;

        z-index: 999;

        background: rgba(0,0,0,0.5);

        opacity: 0;

        pointer-events: none;

        transition: opacity 0.3s ease;

    }


    #mobileMenuOverlay.mobileOpen {

        opacity: 1;

        pointer-events: auto;

    }


    /* ==========================================
       NEWS - MOBILE
       ========================================== */

    #newsList {

        gap: 15px;

    }


    .newsArticle {

        flex: 0 0 100%;

    }
	/* ----- SEVICES MOBILE ------ */
	

	#servicesList {

	width:100%;
    grid-template-columns:
        repeat(1, minmax(0, 1fr));
	}
	.serviceArticle{
		width: 95%;
		margin: 2px;
	}
	
	/* ==========================================
   PARTNERSHIPS - MOBILE
   ========================================== */

#partnersList {

    gap: 15px;

}


.partnershipArticle {

    flex-direction: column;

    align-items: stretch;

    gap: 15px;

    padding: 15px;

}


.partnershipImage {

    width: 100%;

    height: 180px;

    flex: none;

}


.partnershipContent {

    width: 100%;

}


.partnershipContent h3 {

    text-align: center;

}


.partnershipLink {

    display: block;

    margin-right: 0;

    padding: 8px 0;

}

#photoList {

    grid-template-columns:
        repeat(2, 1fr);

    gap: 10px;

}

}