/*!
Theme Name: beatechglobal
Theme URI: http://beatechglobal.com/
Author: RSP
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: beatechglobal
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

beatechglobal is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

html{
	scroll-behavior: smooth;
}

.loader{
	position: fixed;
	inset: 0;
	background-color: #f2f2f2;
	z-index: 9999999;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: opacity 0.5s ease-in-out, visibility 0.5s ease;
}

.loader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body{
	margin: 0;
	padding: 0;
	position: relative;
}

p{
	margin:0;
}

/* Header */

header{
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 9999;
}

header.scrolled {
    background-color: #050D11;
}

.header-inner-container, .footer-inner{
	max-width: 1280px;
	margin: 0 auto;
}

.header-inner-container{
	display: flex;
	align-items: center;
	padding: 20px;
}

.hamburger-button{
	display: none;
	width: 40%;
	color: #FFFFFF;
	text-align: end;
	font-size: 30px;
}

.hamburger-main-menu{
	position: absolute;
	top: 100px;
	left: 20px;
	right: 20px;
	z-index: 9999;
	background-color: #050D11;
}

.hamburger-main-menu ul{
	list-style: none;
	margin: 0;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hamburger-main-menu ul a{
	color: #F7F7F7;
	text-decoration: none;
	font-family: Plus Jakarta Sans;
	font-weight: 400;
	font-size: 14px;
	line-height: 14.8px;
	letter-spacing: 0px;
}

.main-logo{
	width: 30%;
}

.main-header-menu{ 
	width: 70%;
	display: none; /* For the Time Being need to change */
}

.main-header-menu .menu-inner{
	background-color: #FFFFFF1A;
	backdrop-filter: blur(30px);
	width: fit-content;
	padding: 10px;
	border-radius: 40px;
}

.main-header-menu .menu-inner ul{
	display: flex;
	list-style: none;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.main-header-menu .menu-inner ul li{
	padding: 10px 15px;
	border-radius: 20px;
	position: relative;
    z-index: 1;
	transition: 200ms ease;
}

.main-header-menu .menu-inner ul li::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 0.7px; /* Border thickness */
    border-radius: 20px;
    background: linear-gradient(180deg, #3F3F3F 0%, #A5A5A5 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.main-header-menu .menu-inner ul li:last-child{
	background-color: #F7F7F7;
}

.main-header-menu .menu-inner ul li:last-child::before{
	display: none;
}	

.main-header-menu .menu-inner ul li a{
	text-decoration: none;
	color: #F7F7F7;
	transition: 200ms ease;
	font-family: Plus Jakarta Sans;
	font-weight: 400;
	font-size: 14px;
	line-height: 14.8px;
	letter-spacing: 0px;
}

.main-header-menu .menu-inner ul li:hover{
	background-color: #e75a5a;
}

.main-header-menu .menu-inner ul li:last-child a{
	color: #293246;
}

.main-header-menu .menu-inner ul li:last-child a img{
	transition: 200ms ease;
}

.main-header-menu .menu-inner ul li:last-child:hover a{
	color: #FFFFFF;
}

.main-header-menu .menu-inner ul li:last-child:hover img{
	scale: 1.2;
}

/* Footer */
footer{
	background-color: #050D11;
}

.footer-inner{
	padding: 0px 20px;
}

.footer-top{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 0px;
	border-top: 1px solid #292929;
}

.footer-bottom{
	text-align: center;
	padding: 10px 0px;
	border-top: 1px solid #292929;
}

.footer-bottom h3{
	font-family: Plus Jakarta Sans;
	font-weight: 200;
	font-size: 14px;
	line-height: 14.8px;
	letter-spacing:0px;
	color: #F7F7F7;
}

.footer-logo{
	width: 30%;
}

.footer-menu{
	width: 60%;
}

.footer-top ul{
	display: flex;
	align-items: center;
	gap: 20px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-menu li{
	padding: 10px 15px;
	border-radius: 20px;
	position: relative;
    z-index: 1;
	transition: 200ms ease;
}

.footer-menu li::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 0.7px; /* Border thickness */
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(63, 63, 63, 0.4) 0%, rgba(165, 165, 165, 0.4) 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
		border: 0.5px solid;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}

.footer-menu li:hover{
	background-color: #e75a5a;
}

.footer-menu li a{
	font-family: Plus Jakarta Sans;
	font-weight: 400;
	font-size: 14px;
	line-height: 14.8px;
	letter-spacing: 0px;
	text-decoration: none;
	color: #F7F7F7;
}

.social-menu{
	width: 10%;
}

.social-menu li a{
	text-decoration: none;
}

/* Homepage Form */
.homepage-form form{
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.homepage-form form input, .homepage-form form textarea{
	width: 100%;
	border: none;
	border-bottom: 1px solid #434343;
	color: #f7f7f7;
	font-family: Plus Jakarta Sans;
	font-weight: 300;
	font-size: 21px;
	line-height: 21.8px;
	letter-spacing: 0px;
	outline: none;
	background-color: transparent;
	padding: 25px 0px;
}

.homepage-form form textarea{
	resize: none;
}

.homepage-form form .wpcf7-submit{
	background-color: #F7F7F7;
	border-radius: 40px;
	padding: 25px 20px;
	font-family: Plus Jakarta Sans;
	font-weight: 300;
	font-size: 21px;
	line-height: 21.8px;
	letter-spacing: 0px;
	color: #293246;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	transition: 200ms ease;
	border: none;
	margin-top: 50px;
}

.homepage-form form .wpcf7-submit:hover{
	background-color: #D23939;
	color: #F7F7F7;
}

.homepage-form form .wpcf7-response-output{
	margin: 0;
	color: #F7F7F7;
	font-family: Plus Jakarta Sans;
}

.homepage-form .wpcf7-not-valid-tip{
	padding: 10px 0px;
	font-family: Plus Jakarta Sans;
}

.homepage-form form .form-group {
    position: relative;
}

.homepage-form form .form-group .placeholder {
    position: absolute;
    top: 30px;
    left: 0px;
    z-index: 1;
    display: none; /* Hidden initially */
    pointer-events: none;
}

.homepage-form form .form-group .placeholder p{
    display: flex;
	gap: 2px;
}

.homepage-form form .form-group .placeholder p br{
    display: none;
}

.homepage-form form .form-group label {
    color: #9B9B9B;
	font-family: Plus Jakarta Sans;
	font-weight: 300;
	font-size: 21px;
	line-height: 21.8px;
	letter-spacing: 0px;
}

.homepage-form form .form-group .star {
    color: #822323;
	font-family: Plus Jakarta Sans;
	font-weight: 300;
	font-size: 21px;
	line-height: 21.8px;
	letter-spacing: 0px;
}

/* Text Gradient */

.white-heading-text-gradient{
	background: -webkit-linear-gradient(90deg, #FFFFFF 0%, #A5A5A5 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.red-heading-text-gradient{
	background: -webkit-linear-gradient(180deg, #DE764A 0%, #D23939 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.content-text-white-gradient{
	background: -webkit-linear-gradient(270deg, #979797 0%, #979797 49.27%, #222222 55.11%, #222222 60.96%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Before Elements */
.loop-arrow{
	color: #EB7E50;
	border-bottom: 2px solid #979797;
	position: relative;
	display: inline-block;
}

.loop-arrow::before {
	content: "";
	position: absolute;
	top: -60px;
	right: -280px;
	width: 300px;
	height: 80px; /* adjust to your arrow image height */
	background: url('./images/loop-arrow.svg') no-repeat center top;
	background-size: contain;
	pointer-events: none;
	z-index: 1;
}

.border-box-text{
	padding: 10px;
	position: relative;
	width: fit-content;
	border: 10px solid transparent;
	border-image-source: url(./images/text-box.svg);
	border-image-slice: 10;
}

.border-box-text::before{
	content: "";
	background: url(./images/box-arrow.svg) no-repeat top right;
	background-size:contain;
	position: absolute;
	top: -10px;
	right: -55px;
	z-index: 1;
	pointer-events: none;
	width: 48px;
	height: 49.4px;
}

.scroll-container{
	height:600px !important;
    overflow:scroll !important;
}

.scroll-container::-webkit-scrollbar{
	display:none !important;
}

.non-homepage-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
}

@media only screen and (max-width: 920px){
	.footer-top{
		flex-direction: column;
		gap: 30px;
	}
	.footer-top ul{
		justify-content: center;	
	}
	.footer-logo{
		text-align: center;
	}
	.footer-logo, .footer-menu, .social-menu{
		width: 100%;
	}
}

@media only screen and (max-width: 769px){
	.header-inner-container{
		justify-content: space-between;
	}
	.main-header-menu{
		display: none;
	}
	.hamburger-button{
		/* display: block; For the time being */
	}
}

@media only screen and (max-width: 767px){
    .scroll-container{
        height:unset !important;
        overflow:unset !important;
    }
}

@media only screen and (max-width: 520px){
	.footer-menu ul{
		flex-wrap: wrap;
	}
}