@import url('https://fonts.googleapis.com/css2?family=Caprasimo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');


:root{
    --capra:"Caprasimo", serif;
    --merri:"Merriweather", serif;
}


.introSection{
    display: flex;
    flex-direction: column;
    position: relative;
    row-gap: .5rem;
    min-height: 30svh;
    z-index: 20;
    border-bottom: 1px solid var(--accentBg);
}
.introSection::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: var(--fadeOut);
    z-index: 16;
    backdrop-filter: blur(3px);
    mask-image: linear-gradient(to right, #000 30%, transparent 100%);
}




.introSection .introBgSection{
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    z-index: 15;
}

.mapLinks,
.contIntro{
    z-index: 20;
}

.mapLinks{
    margin-top:4rem;
}

.mapLinks{
    display: flex;
    align-items: center;
    width: max-content;
    padding: .3rem 1rem;
    border-radius: 2rem;
    background: var(--blurBg);
    gap: .3rem;
    border: 1px solid var(--accentBg);
    box-shadow: var(--softShadow);
}
.mapLinks a,
.mapLinks i{
    color: var(--gray6);
    font-size: .9rem;
}

.introText002{
    font-size: clamp(2.8rem, 7vw, 6rem);
    font-family: var(--capra);
    color: var(--justWhite);
    background: var(--accent2);
    width: max-content;
    padding: 0 .5rem;
    border-radius: 1.2rem;
    border: 3px solid var(--justWhite);
    outline: 3px solid var(--gray6);
    margin-bottom: .5rem;
}
.introText001{
    color:var(--pureWhite);
    font-family: var(--merri);
    font-size: clamp(1rem, 2vw, 1.5rem);
    width: 60%;
    font-weight: 700;
}
.introText003{
    font-weight: 600;
    margin-block: .7rem;
    width: 50%;
}

.btnsIntro{
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.btnsIntro a{
    padding: .5rem 1rem;
    border-radius: 2rem;
    font-size: clamp(.850rem, 2vw, 1rem);
    
}
.btnsIntro a:nth-child(1){
    color: var(--justWhite);
    background: var(--accent3);
}
.btnsIntro a:nth-child(2){
    background: var(--pureBlack);
    color: var(--pureWhite);
    font-weight: 500;
    border: 1px solid var(--gray3);
}