/* remarks */
$primary-colour: #EF9528;
$secondary-colour:#CF6B0D;
$black: #0b0b0b;
$white: #ffffff;
$grey:#4a4a4a;
$background-grey:#f7f7f7;

$montserrat: 'Montserrat',
'Noto Sans TC',
sans-serif;
$barlow: 'Barlow',
'Noto Sans TC',
sans-serif;
$nowicon:'nowicon';


/* loading icon */
@-webkit-keyframes spinner-border {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes spinner-border {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.loading-wrapper {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Chrome */
    display: flex;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    flex-direction: row;
    align-items: center;
    justify-content: center;
    display: none;
    position: relative;

    &.show {
        display: -webkit-box;
        /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;
        /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;
        /* TWEENER - IE 10 */
        display: -webkit-flex;
        /* NEW - Chrome */
        display: flex;
        /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .spinner-border {
        display: inline-block;
        width: 52px;
        height: 52px;
        vertical-align: text-bottom;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        -webkit-animation: spinner-border .75s linear infinite;
        animation: spinner-border .75s linear infinite;

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0
        }

    }

} 

.max-wrapper{
    text-align: center;
    margin: 60px auto;
    max-width: 800px;

    .logo{
        width: 190px;
        height: auto;
        margin: 0;
    }
    .name{
        margin: 36px 0;
        h2{
            font-size: 24px;
            font-weight: 400;
            font-family: $montserrat;
            margin: 0;
        }
    }

    .message{
        margin: 36px auto;
        width: 100%;
        max-width: 600px;
        h2{
            font-size: 24px;
            font-weight: 500;
            font-family: $montserrat;
            margin: 0 0 36px 0;
        }
        
        h3{
            font-size: 18px;
            font-family: $montserrat;
            font-weight: 500;
            margin: 0;
        }
        p{
            font-size: 18px;
            font-family: $barlow;
            font-weight: 400;
            margin: 0;
            line-height: 1.5;
        }
    }

    .cta-buttons{
        p{
            font-size: 18px;
            font-weight: 400;
            font-family: $barlow;
            margin: 0 0 16px 0;
            color: $black;
            b{
                font-weight: 600;
            }
        }
        margin: 0 0 36px 0;
        .btn{
            min-width: 320px;
        }
    }

    .preview-img{
        
        text-align: center;
        img{
            width: 100%;
            max-width: 360px;
            height: auto;
        }   
    }

    .need-help{
        margin: 0 0 36px 0;
        h5{
            font-size: 18px;
            font-weight: 600;
            font-family: $barlow;
            margin: 0;
        }
        .chat-options {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin: 20px 0;
    
            .item {
    
                margin: 0 60px;
    
                a {
                    text-decoration: none;
                    text-align: center;
    
                    .img-wrap {
                        width: 100px;
                        height: 100px;
                        border-radius: 50%;
                        border: 1.5px solid #0b0b0b;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        -webkit-transition: all 0.5s ease;
                        -moz-transition: all 0.5s ease;
                        -o-transition: all 0.5s ease;
                        transition: all 0.5s ease;
    
                        img.phone {
                            width: auto;
                            height: 41px;
                        }
    
                        img.message {
                            width: auto;
                            height: 39px;
                        }
    
                        img.whatsapp {
                            width: auto;
                            height: 50px;
                        }
    
                    }
    
                    h4 {
                        font-weight: 400;
                        font-size: 18px !important;
                        margin: 20px 0 0 0;
                        font-family: $barlow;
                    }
                }
    
            }
        }
    }

    .status-content{
        display: none;
    }

    
}

@media screen and (max-width: 991px) {
    .max-wrapper{

        .need-help{
            .chat-options {
                margin: 16px 0;
        
                .item {
                    margin: 0 40px;
    
                    a {
                        .img-wrap {
                            width: 80px;
                            height: 80px;
    
                            img.phone {
                                width: auto;
                                height: 35px;
                            }
    
                            img.message {
                                width: auto;
                                height: 33px;
                            }
    
                            img.whatsapp {
                                width: auto;
                                height: 43px;
                            }
                        }
    
                        h4 {
                            font-size: 16px !important;
                            margin: 16px 0 0 0;
                        }
                    }
                }
            }
        }
        
    }
}

@media screen and (max-width: 767px) {
    .max-wrapper{
        margin: 40px auto;
    
        .logo{
            width: 170px;
        }
        .name{
            margin: 32px 0;
            h2{
                font-size: 20px;
            }
        }
    
        .message{
            margin: 32px auto;

            h2{
                font-size: 22px;
                margin: 0 0 32px 0;
            }
            
            h3{
                font-size: 16px;
            }
            p{
                font-size: 16px;
            }
        }
    
        .cta-buttons{
            p{
                font-size: 16px;
                margin: 0 0 14px 0;
            }
            margin: 0 0 32px 0;
        }
    
        .preview-img{
            img{
                max-width: 320px;
            }   
        }
    
        .need-help{
            margin: 0 0 32px 0;
            h5{
                font-size: 16px;
            }
            .chat-options {
                margin: 16px 0;
        
                .item {
                    margin: 0 40px;
    
                    a {
                        .img-wrap {
                            width: 80px;
                            height: 80px;
    
                            img.phone {
                                width: auto;
                                height: 35px;
                            }
    
                            img.message {
                                width: auto;
                                height: 33px;
                            }
    
                            img.whatsapp {
                                width: auto;
                                height: 43px;
                            }
                        }
    
                        h4 {
                            font-size: 16px !important;
                            margin: 16px 0 0 0;
                        }
                    }
                }
            }
        }
        
    }
}