/* Linoor - DIgital Agency HTML Template  */
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.	Fonts
2.	Reset
3.	Global Settings
4.	Scroll To Top style
5.	Main Header style / Header Style One
6.	Sticky Header
7.	Search Popup
8.	Mobile Menu
9.	Lazy Load Settings
10.	Banner Section
11.	Section Title
12.	Services Section
13.	About Section
14.	Live Section
15.	We DO Section
16.	Gallery Section
17.	Fun Facts Section
18.	We DO Section
19.	Team Section
20.	Parallax Section
21.	Sponsors Section
22.	Agency Section
23.	News Section
24.	Call Section
25.	Main Footer
26.	Services Section
27.	We DO Section
28.	Gallery Section
29.	Why Us Section
30.	Testimonials Section
31.	Parallax Section
32.	We DO Section
33.	Call Section
34.	Call Section
35.	Services Section
36.	Discover Section
37.	Parallax Section
38.	We Work Section
39.	Testimonials Section
40.	We DO Section
41.	Get Quote
42.	Map Section
43.	Sponsors Section
44.	Page Banner
45.	Faqs Section
46.	Get Quote
47.	Error Section
48.	Contact Section
49.	Sidebar Page Container
50.	Comment Area
51.	Leave Comments Form
52.	Service Details
53.	Service Details
--------------------------------------------------------------*/
/*
  font-family: 'Teko', sans-serif;
  font-family: 'Barlow', sans-serif;
  font-family: 'Rubik', sans-serif;
*/

/*--------------------------------------------------------------
# Coming Soon
--------------------------------------------------------------*/
.coming-soon {
    background-color: var(--thm-black);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    padding-top: 60px;
    padding-bottom: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.coming-soon .auto-container {
    width: 100%;
}

.coming-soon__title {
    margin: 0;
    color: #fff;
    font-size: 45px;
    text-transform: uppercase;
    font-weight: 300;
    margin-top: 40px;
    margin-bottom: 20px;
}

@media (min-width: 992px) {
    .coming-soon__title {
        font-size: 60px;
        margin-top: 90px;
        margin-bottom: 30px;
    }
}

.coming-soon__form-text,
.coming-soon__text {
    margin: 0;
    color: #999b9f;
    max-width: 570px;
}

.coming-soon__form-title {
    text-transform: uppercase;
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 10px;
}

.coming-soon__form {
    max-width: 400px;
    width: 100%;
    border-radius: 8px;
    position: relative;
    margin-top: 20px;
    margin-bottom: 50px;
}

@media (min-width: 992px) {
    .coming-soon__form {
        margin-bottom: 35px;
    }
}

.coming-soon__form input[type=text],
.coming-soon__form input[type=email] {
    width: 100%;
    height: 70px;
    background-color: #1c1e22;
    font-size: 14px;
    font-family: var(--thm-b-font);
    color: #999b9f;
    border-radius: 8px;
    padding-left: 30px;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

    .coming-soon__form input[type=text]:focus,
    .coming-soon__form input[type=email]:focus {
        -webkit-box-shadow: 0 0 0 1px var(--thm-base);
        box-shadow: 0 0 0 1px var(--thm-base);
    }

.coming-soon__form ::-webkit-input-placeholder {
    opacity: 1;
    color: inherit;
}

.coming-soon__form :-ms-input-placeholder {
    opacity: 1;
    color: inherit;
}

.coming-soon__form ::-ms-input-placeholder {
    opacity: 1;
    color: inherit;
}

.coming-soon__form ::placeholder {
    opacity: 1;
    color: inherit;
}

.coming-soon__form button[type=submit] {
    width: 42px;
    height: 42px;
    background-color: var(--thm-base);
    color: var(--thm-foreground);
    font-size: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 15px;
    border-radius: 50%;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

    .coming-soon__form button[type=submit]:hover {
        background-color: var(--thm-foreground);
        color: var(--thm-base);
    }

.coming-soon__social {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

    .coming-soon__social li + li {
        margin-left: 10px;
    }

    .coming-soon__social a {
        width: 44px;
        height: 44px;
        background-color: var(--thm-base);
        color: var(--thm-foreground);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: center;
        border-radius: 50%;
        font-size: 16px;
        -webkit-transition: all 500ms ease;
        transition: all 500ms ease;
    }

.coming-soon__social a:hover {
    background-color: var(--thm-foreground);
    color: var(--thm-base);
}

.coming-soon__countdown {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    width: 100%;
    max-width: 580px;
    margin-top: 30px;
    margin-bottom: 35px;
}

@media (min-width: 992px) {
    .coming-soon__countdown {
        margin-top: 50px;
        margin-bottom: 45px;
        grid-template-columns: repeat(4, 1fr);
    }
}

.coming-soon__countdown li {
    border: 1px solid var(--thm-base);
    border-radius: 8px;
    text-align: center;
    font-family: var(--thm-font);
    overflow: hidden;
}

    .coming-soon__countdown li span {
        font-size: 45px;
        display: block;
        color: #fff;
        padding-top: 50px;
    }

@media (min-width: 992px) {
    .coming-soon__countdown li span {
        font-size: 60px;
    }
}

.coming-soon__countdown li i {
    text-transform: uppercase;
    color: var(--thm-foreground);
    background-color: var(--thm-base);
    display: block;
    font-size: 20px;
    font-style: normal;
    line-height: 40px;
    display: block;
    padding-top: 5px;
    margin-top: 45px;
}