/* =========================================
   BASIS
========================================= */

body{
    margin:0;
    padding:0;
    background:#FCF8F5;
    font-family:"Inter",sans-serif;
    color:#39404A;
}

.unter-uns-page{
    width:100%;
    overflow:hidden;
}

.section-container{
    max-width:1400px;
    margin:0 auto;
}

/* =========================================
   HERO
========================================= */

.unter-uns-hero{

    position:relative;

    min-height:650px;

    background:url("../img/uns_uns_img_20.png") center center no-repeat;
    background-size:cover;

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

    text-align:center;
}

.unter-uns-overlay{

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;

    padding-top:60px;
}

.unter-uns-hero h1{

    margin:0;

    font-family:"Playfair Display",serif;
    font-size:120px;
    font-weight:500;

    color:#22324D;

    line-height:0.9;
}

.hero-divider{
    margin:5px 0;
}


.hero-divider img{
    width:95px;
}

.hero-subtitle{

    display:flex;
    justify-content:center;

    margin-top:10px;

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

    backdrop-filter:blur(2px);

    padding:20px 40px;

    border-radius:20px;

    width:fit-content;
    margin-left:auto;
    margin-right:auto;

}

.hero-subtitle img{

    width:450px;
    max-width:90%;

    height:auto;

    display:block;

}

/* =========================================
   GRID SECTION
========================================= */

.content-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
}

.image-block img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.text-block{

    background:#FCF8F5;

    padding:70px 80px;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.text-block h2{

    margin:0 0 30px;

    font-family:"Playfair Display",serif;
    font-size:64px;
    font-weight:500;

    color:#22324D;
}

.text-block p{

    font-size:22px;
    line-height:1.9;

    margin-bottom:18px;
}

/* =========================================
   FEELING LIST
========================================= */

.feeling-list{

    margin:35px 0;

    display:flex;
    justify-content:flex-start;

}

.feeling-list img{

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

    height:auto;

    display:block;

}



/* =========================================
   WHY SECTION
========================================= */

.why-section{

    background:#F9F5EF;

    padding:80px;
}

.why-section h2{

    margin:0 0 25px;

    font-family:"Playfair Display",serif;
    font-size:52px;
    font-weight:500;

    color:#22324D;
}

.why-section p{

    font-size:22px;
    line-height:1.9;
}

.highlight-text{

    color:#7F9494;

    font-weight:500;

}

/* =========================================
   CARDS
========================================= */

.cards-wrapper{
    align-items:start;
    max-width:1400px;

    margin:-40px auto 80px;

    display:grid;

    grid-template-columns:1.2fr 1fr 1fr;

    gap:30px;
}

.info-card{

    background:#FFFDFB;

    border-radius:28px;

    padding:40px;

    box-shadow:0 8px 30px rgba(0,0,0,.04);
}

.info-card h3{

    margin:0 0 20px;

    font-family:"Playfair Display",serif;
    font-size:32px;
    font-weight:500;

    color:#22324D;
}

.info-card p{

    font-size:20px;
    line-height:1.8;
}

.card-icon{
    width:120px;
    margin-bottom:25px;
}

.card-icon img{
    width:100%;
}

.check-list{

    margin-top:20px;
}

.check-list li{

    margin-bottom:18px;

    font-size:20px;

    list-style:none;
}

/* =========================================
   EURO SECTION
========================================= */

.euro-section{

    display:grid;
    grid-template-columns:35% 65%;
}

.euro-content{

    padding:70px;

    background:#FCF8F5;
}

.euro-content h2{

    margin:0 0 40px;

    font-family:"Playfair Display",serif;
    font-size:50px;
    font-weight:500;

    color:#22324D;
}

.euro-icons{

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

    gap:25px;

    margin-bottom:50px;
}

.euro-item{
    text-align:center;
}

.euro-item img{
    width:80px;
    margin-bottom:15px;
}

.euro-item p{

    font-size:18px;
    line-height:1.7;
}

.euro-message{

    text-align:center;
    margin-top:30px;

}

.euro-message img{

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

    height:auto;

    display:block;
    margin:0 auto;

}

/* =========================================
   FOOTER HERO
========================================= */

.bottom-hero{

    background:url("../img/uns_uns_img_19.png") center center no-repeat;
    background-size:cover;

    text-align:center;

    padding:120px 40px;
}

.bottom-grid{

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

    gap:50px;

    max-width:1200px;

    margin:0 auto 50px;
}

.bottom-item img{
    width:70px;
    margin-bottom:15px;
}

.bottom-item h3{

    margin:0;

    font-family:"Playfair Display",serif;
    font-size:32px;
    font-weight:500;

    color:#22324D;
}

.bottom-logo{
    max-width:450px;
    margin:0 auto;
}

.bottom-logo img{
    width:100%;
}

.bottom-text{

    margin-top:20px;

    font-size:28px;

    color:#FFFFFF;
}

/* =========================================
   TABLET
========================================= */

@media(max-width:1100px){

    .content-grid{
        grid-template-columns:1fr;
    }

    .cards-wrapper{
        grid-template-columns:1fr;
    }

    .euro-section{
        grid-template-columns:1fr;
    }

    .euro-icons{
        grid-template-columns:1fr 1fr;
    }

    .bottom-grid{
        grid-template-columns:1fr;
    }

    .unter-uns-hero h1{
        font-size:80px;
    }
}

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

@media(max-width:768px){

    .unter-uns-hero h1{
        font-size:58px;
    }

    .hero-subtitle{
        font-size:22px;
    }

    .text-block,
    .why-section,
    .euro-content{
        padding:35px;
    }

    .text-block h2,
    .why-section h2,
    .euro-content h2{
        font-size:42px;
    }

    .text-block p,
    .why-section p{
        font-size:18px;
    }

    .feeling-list{
        grid-template-columns:1fr;
    }

    .euro-icons{
        grid-template-columns:1fr;
    }
}