/* Import CSS */
@import url('./reset.css');
@import url('./base.css');
@import url('./typography.css');
@import url('./color.css');
@import url('./component.css');
@import url('./btn.css');

/* Variables */
:root{
    --header-height:13rem;
}

.intro.grid{gap: var(--sm);}

@media(width > 991px){
    .intro-section{padding-bottom: 0;}
    .intro.grid{grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));}
    .intro-section article{padding-bottom: var(--lg); display:flex; flex-direction:column; justify-content:center;}
    .project p {max-width:75%;}
}
@media(width < 992px){
    .intro figure img{transform:none;}
}

.projects{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sm) calc(var(--gutter) / 2);}
.project figure{aspect-ratio:1;}
.project figure img{object-fit: cover; width: 100%; height: 100%;}
.project figure:not(:last-child){margin-bottom: 2rem;}
.project>*:not(:last-child){margin-bottom: 1rem;}
.project h6:not(:last-child) {
    margin-bottom: 1rem;
}
.project .icon-project {
    margin-left: auto;
    font-size: calc(var(--font-size)* 0.85);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--primary);
    display:flex;
    gap:1rem;
}
.project .icon-project img {
    transition: var(--transition)
}
.project:hover .icon-project img {
    transform: translate(1rem,0)
}



@media(width < 992px) {
    .projects{grid-template-columns: repeat(2, 1fr);} 
}
@media(width < 576px){
    .projects{grid-template-columns: 1fr;}
    .project p {
        max-width: 100%;
    }
}

.article.d-flex{gap: var(--sm);}
.article figure{overflow: hidden;}
.article figure img{object-fit: cover; width: 100%; height: 100%;}
.article .border-list{display: flex; flex-direction: column;}
.article .border-list li{flex: 1;}
.border-list li{padding: 2.5rem 0; border-bottom: var(--border-width) var(--border-style) var(--border-color); display: flex; align-items: center; justify-content: space-between; gap: 1rem var(--gutter);}
.article-top{height: clamp(8rem, 15rem, 12vh);}
.article.d-flex figure{max-width: 70rem;}
.article-content .border-list, .article-content .article-top, .article-content article{width: 100%; max-width: 80rem;}
.article-content.press-content .border-list {width: 100%; max-width: 100%;}
.article-content .border-list li a {
    color: var(--text-color) !important;
}
.article-content .border-list.list-full{max-width:100%;}
@media(width < 1400px){
    .article.d-flex figure{max-width: 60rem;}
    .border-list li{padding: 1.5rem 0;}
}
@media(width < 1200px){
    .article.d-flex figure{max-width: 40vw;}
}
@media(width < 992px){
    .article.d-flex{flex-direction: column;}
    .article.d-flex figure{max-width: 80vw;}
    .article-content .border-list, .article-content .article-top, .article-content article{max-width: 100%;}
    .article-content .ml-auto, .article-content .mr-auto{margin: 0;}
}
@media(width < 768px){
    .article.d-flex figure{max-width: 100%;}
}

.live-section{min-height: 65rem; position: relative; isolation: isolate; background: var(--bg-image) center center no-repeat; background-size: cover;}
.live-section::after{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: hsla(0,0%,0%,25%); z-index: -1;}
.live-content h2{max-width: 60rem;}
.live-content p{max-width: 65rem;}

.counts.grid{gap: var(--gutter);}
.count{display: flex; gap: 2rem var(--gutter);}
.count h1{font-size: clamp(var(--h1), 10vw, 10vw); line-height: .8;}
.count p{white-space: nowrap;}
@media(width < 1500px){
    .count h1{font-size: clamp(var(--h1), 7vw, 7vw);}
}
@media(width < 1200px){
    .counts .count{flex-direction: column; align-items: center;}
}
@media(width > 575px){
    .counts.grid{grid-template-columns: auto auto auto;}
}
@media(width < 576px){
    .counts.grid{grid-template-columns: 1fr;}
    .count-section{text-align: center;}
    .counts.grid{gap: calc(var(--gutter) * 2) 0;}
}

.logos.grid{grid-template-columns: auto auto auto auto auto auto; justify-content: space-between; gap: var(--xl);}
.logo{display: flex; justify-content: center;}
@media(width < 992px){
    .logos.grid{grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));}
    .logo img{max-width: 10rem;}
}

/* Footer Start */
footer{background-color: var(--primary);}
footer p{color: white;}
footer p a{color: white; text-decoration: underline;}
footer p a:hover{color: var(--secondary); text-decoration: none;}
.footer-content:not(:last-child){margin-bottom: var(--sm);}
.footer-content{min-height: clamp(20rem, 50rem, 40vh);}
.footer{display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--gutter);}
.footer-logo img{width: clamp(30rem, 80rem, 55vw);}
.footer-links.d-flex{gap: 2rem clamp(2rem, var(--sm), 3vw);}
.footer-links a{color: white;}
.footer-links a:hover, .footer-links a:focus{color: var(--secondary);}
.footer-content-block{max-width: 110rem; display: flex; flex-wrap: wrap; gap:var(--gutter); justify-content: space-between;}
.footer-content-block > *{max-width: 30rem;}
/* Footer End */

.full-banner{min-height: 95rem; background-size: cover; background-repeat: no-repeat; background-position: center center;}
@media(width < 1400px){
    .full-banner{min-height: 80rem;}
}
@media(width < 1200px){
    .full-banner{min-height: 60rem;}
}
@media(width < 992px){
    .full-banner{min-height: 40rem;}
}

.image-gallery{display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--gutter) / 2);}
.image-gallery > .span-2{grid-column: span 2;}
.image-gallery figure{overflow: hidden; aspect-ratio: 1;}
.image-gallery figure.span-2{aspect-ratio: 2/1;}
.image-gallery figure img{object-fit: cover; width: 100%; height: 100%;}
@media(width < 576px){
    .image-gallery{display: block;}
    .image-gallery > :not(:last-child){margin-bottom: calc(var(--gutter) / 2);}
    .image-gallery figure, .image-gallery figure.span-2{aspect-ratio: 1;}
}

.hero-section{min-height: 100dvh; background: black;  isolation: isolate; padding: calc(var(--header-height) + var(--sm)) 0 var(--lg); display: flex; position: relative;}
    .hero-section .container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: var(--xs);
        padding-left: 10%;
    }
.hero-section::before{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: hsla(0,0%,0%,40%); content: ""; z-index: -1; } 
.hero-section h1{color: white; max-width: 75rem;}
.hero-section p {
        color: white;
        max-width: 75rem;
        font-size: var(--font-size);
        font-weight: 500;
    }
.hero-section h1:not(:last-child){margin-bottom: var(--gutter);}
.hero-box{background-color: white; padding: var(--gutter); width: 100%; max-width: 60rem;}
.hero-box h3:not(:last-child){margin-bottom: var(--gutter);}

header{padding: 1rem 0; display: flex; align-items: center; transition: var(--transition); height: var(--header-height);}
header.position-fixed{z-index: 9999; left: 0; top: 0; width: 100%;}
header .logo{display: inline-flex; margin-right: auto;}
header .logo img{max-width: 29rem;}
header .container{display: flex; align-items: center;}
.home-header nav a{color: white;}
.home-header.active{background-color: var(--primary);}
header .languages:not(:last-child){margin-right: var(--sm);}
.languages{position: relative; /*padding-bottom: .5rem;*/}
.language-toggle{display: flex; align-items: center; gap: 0 .5rem; cursor: pointer;} 
.language-dropdown{min-width: 12rem; position: absolute; right: 0; top: 100%; background-color: white; border-radius: .4rem; box-shadow: 0 0 1rem rgba(0,0,0,10%); overflow: hidden; transform: translateY(1rem); opacity: 0; visibility: hidden; pointer-events: none; transition: all 100ms linear;}
.language-dropdown.active{opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);}
.language-dropdown li:not(:last-child){border-bottom: .1rem solid rgba(0,0,0,10%);}
.language-dropdown li a{display: flex; align-items: center; padding: 1rem 1rem; line-height: 1; font-size: 1.6rem; white-space: nowrap; color: var(--text-color);}
.language-dropdown li a:hover{background-color: rgba(0,0,0,10%);}


.social-media{display: flex; align-items: center; gap: 0 1rem;}
header nav:not(:last-child){margin-right: calc(var(--lg) * 2);}
nav{display: flex; align-items: center; gap: 1rem var(--sm);}
nav a{display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; color: var(--text-color); font-size: 1.8rem; position: relative; padding-bottom: .5rem;}
nav a::after{position: absolute; left: 50%; bottom: 0; transform:translateX(-50%); width: 0; height: .2rem; background-color: var(--text-color); content: ""; transition: all 150ms linear;}
.home-header nav a::after{background-color: white;}
nav a:hover::after, nav a.active::after{width: 100%;}
@media(width < 768px){
    header .logo img{max-width: 20rem;}
    header .languages:not(:last-child){margin-right: var(--gutter);}
    header .logo {
        margin-right: auto;
        padding-right: var(--gutter)
    }
}
@media(width < 1200px){
    header nav:not(:last-child){margin-right: var(--sm);}
}
@media(width > 991px){
    .mobile-nav{display: none !important;}
    header .burger{display: none !important;}
}
@media(width < 992px){
    header nav:not(:last-child){margin-right: 0;}
    header nav{display: none !important;}
    .mobile-nav{position: fixed; left: 0; top: 0; width: 100%; height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gutter);  z-index: 999; background-color: var(--primary); transition: 150ms linear; opacity: 0; visibility: hidden; pointer-events: none;}
    .mobile-nav.active{opacity: 1; visibility: visible; pointer-events: auto;}
    .mobile-nav a{color: white; font-size: 10vw; line-height: 1; letter-spacing: .2rem;}
    .mobile-nav a:hover{letter-spacing: .5rem;}
    .mobile-header{min-height: var(--header-height); position: absolute; left: 0; top: 0; width: 100%; padding: 1rem var(--gutter); display: flex; align-items: center; justify-content: space-between;}
    .mobile-header .mobile-header-logo img{max-width: 20rem;}
    .burger{position: relative; width: 4rem; height: 3rem; cursor: pointer;}
    .burger::before, .burger::after{position: absolute; width: 100%; height: .1rem; content: ""; background-color: var(--primary); transition: 150ms linear;}
    .burger::before{left: 50%; top: 40%; transform: translate(-50%, -50%);}
    .burger::after{right: 50%; bottom:40%; transform:translate(50%, 50%);}
    .burger.active::before{transform: translate(-50%, -50%) rotate(-45deg); top: 50%; background-color: white;}
    .burger.active::after{transform: translate(50%, 50%) rotate(45deg); bottom:50%; background-color: white;}
    header .burger{ position: relative; z-index: 9999;}
    .home-header .burger::before, .home-header .burger::after{background-color: white;}
    .hide-sm {display:none;}
    .hero-section .container {
        padding-left: var(--gutter);
    }

    header .social-media {
        display: none
    }
 }




.project figure{overflow: hidden; position: relative;}
.project figure img{position: absolute; width: 100%; height: 120%; bottom: 0; object-fit: cover;}

.hero-section{overflow: hidden;}
.hero-section img.bg{position: absolute; width: 100%; height: 120%; top: 0; object-fit: cover; z-index: -2;}