/* Mobile Responsive Fixes for Coming Soon Page */

/* Tablets and smaller */
@media only screen and (max-width: 768px) {
    .half-hero-wrap {
        left: 0 !important;
        padding: 0 30px !important;
        width: 100%;
        box-sizing: border-box;
    }
    
    .half-hero-wrap h1 {
        font-size: 32px !important;
        line-height: 45px !important;
    }
    
    .countdown-item {
        margin-right: 40px !important;
    }
    
    .countdown-item span {
        font-size: 42px !important;
    }
}

/* Mobile devices */
@media only screen and (max-width: 564px) {
    .soon-wrap .half-hero-wrap {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        padding: 0 20px !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin-bottom: 0 !important;
        text-align: center;
    }
    
    .half-hero-wrap h1 {
        font-size: 24px !important;
        line-height: 36px !important;
        padding-bottom: 20px !important;
        text-align: center;
    }
    
    .half-hero-wrap h1:before {
        top: -20px !important;
        width: 60px !important;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .countdown,
    .counter-widget {
        display: none !important;
    }
    
    .half-hero-wrap h4 {
        display: block !important;
        font-size: 12px !important;
        padding: 12px 20px !important;
        margin-top: 10px;
        text-align: center !important;
        letter-spacing: 1px;
        display: none !important;
    }
    
    .cs-wrap .subcribe-form {
        width: 100% !important;
        max-width: 300px;
        margin: 20px auto 0;
        float: none !important;
    }
}

/* Extra small devices */
@media only screen and (max-width: 375px) {
    .half-hero-wrap h1 {
        font-size: 20px !important;
        line-height: 32px !important;
    }
    
    .half-hero-wrap h4 {
        font-size: 11px !important;
        padding: 10px 15px !important;
    }
}

/* Landscape mobile orientation */
@media only screen and (max-height: 500px) and (orientation: landscape) {
    .soon-wrap .half-hero-wrap {
        top: 5% !important;
    }
    
    .half-hero-wrap h1 {
        font-size: 20px !important;
        line-height: 30px !important;
        padding-bottom: 10px !important;
    }
    
    .countdown {
        margin-top: 10px !important;
    }
    
    .countdown-item {
        margin-bottom: 15px !important;
    }
    
    .countdown-item span {
        font-size: 28px !important;
    }
    
    .half-hero-wrap h4 {
        font-size: 10px !important;
        padding: 8px 15px !important;
    }
}
