/*
Theme Name: horizon
Template: twentytwentyone
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.0
Requires PHP: 5.6
Version: 1.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
@font-face {
    font-family: 'TT Commons';
    src: url('./assets/fonts/TT-Commons/TTCommons-Bold.eot');
    src: url('./assets/fonts/TT-Commons/TTCommons-Bold.eot?#iefix') format('embedded-opentype'),
        url('./assets/fonts/TT-Commons/TTCommons-Bold.woff2') format('woff2'),
        url('./assets/fonts/TT-Commons/TTCommons-Bold.woff') format('woff'),
        url('./assets/fonts/TT-Commons/TTCommons-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Commons';
    src: url('./assets/fonts/TT-Commons/TTCommons-Medium.eot');
    src: url('./assets/fonts/TT-Commons/TTCommons-Medium.eot?#iefix') format('embedded-opentype'),
        url('./assets/fonts/TT-Commons/TTCommons-Medium.woff2') format('woff2'),
        url('./assets/fonts/TT-Commons/TTCommons-Medium.woff') format('woff'),
        url('./assets/fonts/TT-Commons/TTCommons-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Commons';
    src: url('./assets/fonts/TT-Commons/TTCommons-Regular.eot');
    src: url('./assets/fonts/TT-Commons/TTCommons-Regular.eot?#iefix') format('embedded-opentype'),
        url('./assets/fonts/TT-Commons/TTCommons-Regular.woff2') format('woff2'),
        url('./assets/fonts/TT-Commons/TTCommons-Regular.woff') format('woff'),
        url('./assets/fonts/TT-Commons/TTCommons-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* ############################ Remove Unnecessary style and element ############################### */
header, aside, .site-name { display: none !important;}
.site-header, .site-main, .widget-area, .site-footer { padding: 0 !important; margin: 0 !important;}

/* ############################ Global Style ############################### */
*{ margin: 0; padding: 0; box-sizing: border-box;}
/* body { background-color: #2B2B2B;} */
span,a { display: inline-block;}
img { max-width: 100%; max-height: 100%;}
ul,li,ol { padding: 0;}
a:focus,a:active { outline: none !important; box-shadow: none !important;}
a {text-decoration: none !important; transition-duration: 0.5s;}

/* ############################ Typography ############################### */
html { font-size: 16px;}
p { font-weight: 600; font-size: 1rem; line-height: 1.5rem; font-weight: 400;}


/* ############################ Common-style ############################### */
.orange-arrow { position: relative;}
.orange-arrow::before { content: ''; position: absolute; width: 20%; height: 100%; right: 0; top: 0; background: url('./assets/images/orange-arrow.svg') no-repeat center center / contain; transform: translate(65%,-50%);}

/* ############################ Coming-soon-section ############################### */
.coming-soon { display: flex; align-items: center; justify-content: center;  min-height: 800px;}
.coming-soon  * { font-family:'Outfit', sans-serif; color: rgba(51, 51, 51, 1);}
.coming-soon h1,
.coming-soon h2,
.coming-soon h3,
.coming-soon h4,
.coming-soon h5,
.coming-soon h6 { font-family: 'TT Commons'; display: inline-block; color:rgba(0, 133, 216, 1)    ;}
.coming-soon-content { max-width: 1170px; margin: 0 auto;}
.site-logo-container { display: flex; justify-content: space-between; align-items: center;}
.coming-soon-badge { padding: 0.5rem 1rem;  background-color: #0085D8; border-radius: 2rem; }
.coming-soon-badge span { font-size: 1.25rem; line-height: 1.5rem; font-weight: 500; color: #ffffff;}
.coming-soon-badge.orange-arrow::before { transform: translate(90%,-60%);}
.comin-soon-desc p span { display: block; font-size: inherit; line-height: inherit; color: inherit; font-weight: inherit;}
.coming-soon-content .site-logo { max-width: 40%; width: 18%;}
.coming-soon-content .site-logo img { width: 100%;}
.coming-soon-content h1 { margin-block: 2rem; font-size: 2rem; line-height: 2rem; font-weight: 700; text-transform: uppercase;}
.contact-details { padding-block: 2rem 1rem; display: flex; justify-content: space-between; border-top: 1px solid #333333; flex-wrap: wrap;}
.contact-details-title  { text-transform: uppercase;}
.contact-details-title  p { color: #0085D8; font-weight: 600;}
.get-in-touch { width: 50%;}
.contact-us { width: 30%;}
.input-fileds * { width: 100%;}
.input-fileds { position: relative; border: 1px solid rgba(51, 51, 51, 1);}
.input-fileds P { margin-bottom: 0;}
.input-fileds label { position: absolute; width: fit-content; top: 0.5rem; left: 0.75rem; font-size: 0.875rem; line-height: 1rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase;}
.input-fileds input, .input-fileds textarea { padding: 0.5rem 0.75rem ; border: none; background-color: transparent; color: rgba(51, 51, 51, 1); font-size: 1rem; line-height: 1.375rem; font-weight: 400;}
.input-fileds input:focus, .input-fileds textarea:focus { color: rgba(51, 51, 51, 1); outline: none; box-shadow: none;}
.wpcf7-form .input-fileds:not(:first-child) { margin-top: 0.75rem;}
.input-fileds textarea { max-height: 5.5rem; resize: none;}
.wpcf7-submit { margin-block: 0.75rem; background-color: transparent !important; border: 1px solid rgba(248, 103, 24, 1) !important; text-transform: uppercase; font-size: 0.875rem !important; line-height: 1rem !important; color: rgba(248, 103, 24, 1) !important; transition-duration: 0.5s; font-weight: 600 !important;}
.wpcf7-submit:hover { background-color: rgba(248, 103, 24, 1) !important; color: black !important;}
.wpcf7-submit:focus { outline: none !important; box-shadow: none !important;}
.wpcf7-not-valid-tip { position: relative; left: 0.75rem; bottom: 1px; width: fit-content; font-size: 12px; color: rgba(248, 103, 24, 1);}
.wpcf7-response-output { margin: 1rem 0 0 !important; font-size: 0.75rem; line-height: 1rem;}
.contact-details-content p { font-size: 1rem; line-height: 1.375rem; font-weight: 400;}
.coming-soon a:hover { color: rgba(248, 103, 24, 1);}
.contact-details-content a{ display: block;}
input::placeholder,
textarea::placeholder { font-weight: 300 !important; color:rgba(51, 51, 51, 1) !important;}
.contact-details-content .contact-details-content-container:not(:first-child) { margin-top: 0.75rem;}
.contact-details-content-container p { margin: 0;}
.contact-details-content-container strong { font-weight: 500;}
footer { max-width: 100% !important;}
.site-info { margin: 0 !important; padding: 0.5rem 0!important; border-top: 1px solid rgba(0, 0, 0, 0.1) !important; display: flex; align-items: center; justify-content: center;}
.site-info p { font-size: 0.875rem; line-height: 1rem; text-align: center;}

@media(max-width: 767px){
	html { font-size: 14px;}
	.contact-details { row-gap: 1rem;}
	.get-in-touch,.contact-us { width: 100%;}
    .coming-soon-content h1 { margin-block: 1rem; font-size: 1.5rem;}
    .coming-soon-content { max-width: 690px;}
    .coming-soon-content .site-logo { width: auto;}
}
@media(max-width: 575px){
    .orange-arrow::before {
        content: '';
        position: absolute;
        width: 12%;
        height: 100%;
        right: 0;
        top: 0;
        background: url('./assets/images/orange-arrow.svg') no-repeat center center / contain;
        transform: translate(30%,-50%);
      }
      .coming-soon-content h1 {max-width: 300px;}
      .coming-soon-content .site-logo {
        max-width: 30%;
      }
      .coming-soon-content { max-width: 690px;}
      .coming-soon-content .site-logo { width: auto;}
      .site-info p { max-width: 245px; margin: 0 auto;}
}