/*==== hero area ==== */

@media screen and (max-width: 769px) {
    .preview-hero .headding h1 {
        color: var(--d-white, #FFF);
        text-align: center;
        font-size: 100px;
        font-style: normal;
        font-weight: 800;
        line-height: 100px; /* 100% */
        padding-top: 30px;
    }

    .interactive .image {
        text-align: left;
        margin-top: 30px;
    }

    .preview-footer .headding h2 {
        color: var(--d-white, #FFF);
        text-align: center;
        font-size: 100px;
        font-style: normal;
        font-weight: 900;
        line-height: 100px; /* 100% */
    }

    .sp {
        padding: 60px 0px;
    }

    .preview-footer {
        min-height: 810px;
    }

    .preview-footer .headding {
        padding-top: 20px;
    }
    .preview-hero .headding {
        padding: 100px 0 0;
    }
    .preview-hero .headding p {
        margin-top: 0;
    }
    .preview-hero .headding{
        margin-top: 40px;
    }
    .preview-hero .headding h1{
        margin-bottom: 30px;
    }
    
}

@media screen and (max-width: 426px) {
    .preview-hero .headding h1 {
        color: var(--d-white, #FFF);
        text-align: center;
        font-size: 60px;
        font-style: normal;
        font-weight: 800;
        line-height: 60px;
        margin-bottom: 20px;
    }


    .preview-footer .headding h2 {
        color: var(--d-white, #FFF);
        text-align: center;
        font-size:  60px;
        font-style: normal;
        font-weight: 900;
        line-height: 60px;
    }
    .features .headding h2 {
        font-size: 39px;
        line-height: 49px;
    }
    
    .demos .headding h2 {
        font-size: 39px;
        line-height: 49px;
    }
    
    .inner-demo .headding h2 {
        font-size: 38px;
        line-height: 48px;
    }
    
    .preview-blog .headding h2 {
        font-size: 38px;
        line-height: 48px;
    }
    
    .additional .headding h2 {
        font-size: 38px;
        line-height: 48px;
    }
    
    .faq .headding h2 {
        font-size: 38px;
        line-height: 48px;
    }
    .preview-footer .headding{
        padding-top: 0;
    }
    .preview-hero .headding {
        padding: 100px 0 0;
    }
    .preview-hero{
        min-height: 750px;
    }
    .hero-video-area iframe {
        height: 300px;
    }
    
    .bg-video-wrap {
        height: 300px;
    }
    .preview-hero .headding p{
        margin: 0;
    }
    .preview-hero .headding {
        margin-top: 20px;
    }
    .preview-footer .headding p {
        font-size: 20px;
        line-height: 30px;
        margin: 0;
    }
    
    .preview-footer .headding {
        margin-top: 50px;
    }
    
    .preview-footer .headding h1 {
        margin-bottom: 16px;
    }
    .preview-footer{
        min-height: 550px;
    }
}

/*==== hero area ==== */