/* Hero */
.hero{ background: var(--grey-222); width: 100%; height: 700px; position: relative; overflow: hidden; }
.hero .content{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; z-index: 1; }
.hero:before{ content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,.6); }
.hero .text{ position: relative; z-index: 1000; display: flex; flex-direction: column; align-items: center; }
.hero .text h1{ font-size: 52px; color: var(--white); text-shadow: 0 1px 10px rgba(0,0,0,.8); text-align: center; font-weight: 600; line-height: 1.3; letter-spacing: -1px; }
.hero .text h1 span{ display: block; } 
.hero .text h1 strong{ font-weight: 600; }
.hero .text p{ color: var(--white); font-size: 18px; line-height: 1.5; max-width: 700px; margin: 40px auto; text-align: center; }

/* Hero Small */
.hero.small{ height: 300px; }

/* Intro Block */
.intro-block{ padding: 100px 0; }
.intro-block .content{ display: flex; justify-content: space-between; align-items: center; max-width: 900px; }
.intro-block .left{ width: 420px; }
.intro-block .left h2{ font-size: 38px; color: var(--black); margin-bottom: 20px; font-weight: 600; letter-spacing: -1px; line-height: 1.2; }
.intro-block .left p{ margin-bottom: 20px; font-weight: normal; font-size: 18px; line-height: 1.4; color: var(--grey-222); }
.intro-block .right{ border-radius: 30px; overflow: hidden; line-height: 0; width: 380px; height: 500px; }
.intro-block .right img{ width: 100%; height: 100%; object-fit: cover; }

/* Blog */
.blog-section{ background: var(--white-eee); padding: 100px 0; } 
.blog-section .head{ display: flex; flex-direction: column; align-items: center; margin-bottom: 50px; }
.blog-section .head .title{ font-size: 52px; margin-bottom: 20px; font-weight: 600; letter-spacing: -1px; line-height: 1; }
.blog-section .head .description{}
.blog-section .blog-listing{ display: flex; }
.blog-section .bottom{ display: flex; align-items: center; justify-content: center; margin-top: 80px; }

@media screen and (max-width: 1280px){

    /* Hero */
    .hero .text h1{ font-size: 42px; }
    .hero .text p{ font-size: 16px; }

    /* Hero Small */
    .hero.small{ height: 300px; }
    .hero.small .text h1{ font-size: 38px; }

    /* Intro */
    .intro .left h2{ font-size: 32px; }
    .intro .left p{ font-size: 15px; }
    .intro .right{ width: 350px; height: 440px; }

}

@media screen and (max-width: 1023px){

    /* Hero */
    .hero{ height: 650px; }
    .hero .text h1{ font-size: 36px; }
    .hero .text h1 span{ display: inline; }
    .hero .text p{ font-size: 15px; }

    /* Hero Small */
    .hero.small{ height: 280px; }
    .hero.small .text h1{ font-size: 32px; }

    /* Intro */
    .intro-block{ padding: 70px 0 50px; }
    .intro-block .content{ flex-direction: column-reverse; }
    .intro-block .left{ width: 100%; }
    .intro-block .right{ width: 100%; height: 400px; margin-bottom: 40px; }

    /* Blog */
    .blog-section .head .title{ font-size: 42px; }
    .blog-section .blog-listing{ flex-direction: column; }
    
}

@media screen and (max-width: 767px){

    /* Hero */
    .hero .text h1{ font-size: 32px; }
    .hero .text p{ font-size: 14px; }
    
    /* Hero Small */
    .hero.small{ height: 230px; }
    .hero.small .text h1{ font-size: 28px; }

    /* Intro */
    .intro-block .left h2{ font-size: 28px; }
    .intro-block .left p{ font-size: 14px; }

    /* Blog */
    .blog-section{ padding: 70px 0; }
    .blog-section .head .title{ font-size: 36px; }
    .blog-section .bottom{ margin-top: 20px; }
    
}

@media screen and (max-width: 540px){
    
}