/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* ===============================
   CABINET GROTESK (HEADINGS)
   =============================== */

@font-face {
  font-family: "Cabinet Grotesk";
  src: url("fonts/CabinetGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cabinet Grotesk";
  src: url("fonts/CabinetGrotesk-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cabinet Grotesk";
  src: url("fonts/CabinetGrotesk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cabinet Grotesk";
  src: url("fonts/CabinetGrotesk-Extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ===============================
   GENERAL SANS (BODY / UI)
   =============================== */

@font-face {
  font-family: "General Sans";
  src: url("fonts/GeneralSans-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "General Sans";
  src: url("fonts/GeneralSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "General Sans";
  src: url("fonts/GeneralSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


:root {
  --font-heading: "Cabinet Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  --font-body: "General Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

/* Body text */
body,
p,
li{
  font-family: var(--font-body) !important;
  font-weight: 400;
}

/* UI elements */
button,
.nav a,
label {
  font-family: var(--font-body) !important;
  font-weight: 300;
}

a{
  font-family: var(--font-heading) !important;
  font-weight: 400;
}

/* Headings */
h1 {
  font-family: var(--font-heading) !important;
  font-weight: 800;
}

h2,
h3 {
  font-family: var(--font-heading) !important;
  font-weight: 700;
}

h4,
h5,
h6 {
  font-family: var(--font-heading) !important;
  font-weight: 400;
}

.text-gradient{
	font-family: var(--font-heading) !important;
	color: transparent;
    background-image: linear-gradient(135deg, hsl(16, 100%, 55%) 0%, hsl(35, 100%, 50%) 100%);
	background-clip: text;
	-moz-background-clip: text;
	-webkit-background-clip: text;
}

/* Header CSS */

/* CSS: add this to your stylesheet */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  background-color: rgba(255,255,255,0); /* transparent default */
  transition: background-color 220ms ease, backdrop-filter 220ms ease, -webkit-backdrop-filter 220ms ease, box-shadow 220ms ease;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  will-change: backdrop-filter, background-color;
}

/* scrolled state: blur 16px */
.site-header.scrolled {
  background-color: rgba(255,255,255,0.25); /* tweak opacity if you want stronger/softer */
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
}

/* fallback for browsers without backdrop-filter support */
.site-header.no-backdrop-filter.scrolled {
  /* stronger opaque fallback */
  background-color: rgba(255,255,255,0.95);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.featured-image {
    margin-top: 20px;
    display: none;
}

.duration-300{
	animation-duration: .3s; 
	transition-duration: .3s;
}

.transition-all {
    transition-property: all; 
	transition-timing-function: cubic-bezier(.4,0,.2,1); 
	transition-duration: .15s;
}

/* Animation CSS */

.animate-pulse-glow {
    animation: pulseGlow 3s ease-in-out infinite;
}

@keyframes pulseGlow{
		0%, 100% {
			opacity: .5;
		}

		50% {
			opacity: 1;
		}
	}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float{
		0%, 100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-20px);
		}
	}

.animate-bounce {
    animation: bounce 1s infinite;
}

@keyframes bounce{
		0%, 100% {
			transform: translateY(-25%);
			animation-timing-function: cubic-bezier(.8, 0, 1, 1);
		}
	
		50% {
			transform: none;
			animation-timing-function: cubic-bezier(0, 0, .2, 1);
		}
	}

.bg_circle{
	background: #ff571a1a;
	border-radius: 9999px;
	width: 24rem;
	height: 24rem;
	filter: blur(64px);
}

.sm_circle{
	background: #ff571a1a;
	border-radius: 9999px;
	width: 20rem;
	height: 20rem;
	filter: blur(64px);
}

.dot_right {
    background: #ff571a;
    border-radius: 9999px;
    width: .5rem;
    height: .5rem;
}

.dot_left_top {
    background: #ff571a;
    border-radius: 9999px;
    width: .75rem;
    height: .75rem;
}

.dot_left_botm {
    background: #ff571a;
    border-radius: 9999px;
    width: .25rem;
    height: .25rem;
}

.lrg_crcl{
	background: #ff571a0d;
	border-radius: 9999px;
	width: 600px;
	height: 600px;
	filter: blur(64px);
}

/* Header CSS */

.site-header .inside-header {
    width: 1140px;
    padding: 20px 0;
}

.main-navigation .main-nav ul li a {
    line-height: 1.25;
    font-size: 14px;
    font-weight: 500;
}

.hm_btn{
	margin-left: 20px;
}

.hm_btn a {
    display: inline-block;
    background: #ff571a;
    color: #fff !important;
    padding: 10px;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
}

.hm_btn a:hover {
	box-shadow: 0 0 40px hsla(16, 100%, 60%, 0.4);
	transform: scale(1.05, 1.05);
}

.hm_btn_grow a{
	transition: all 0.3s cubic-bezier(.4,0,.2,1);
}

.hm_btn_grow a:hover {
	transform: scale(1.05, 1.05);
}

/* Body CSS */

.scroll_btn a .elementor-button-content-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: space-between;
}

.scroll_btn a .elementor-button-text {
    order: 1;
}

.scroll_btn a .elementor-button-icon {
    order: 2;
}

.wid{
	transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

.wid:hover{
	transform: translateY(-5px);
}

.wid_icn {
    background: #ff571a1a;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.wid:hover .wid_icn{
	color: #ff571a33;
}

.wid_icn svg {
    color: #ff571a;
    width: 20px;
}

.git_email p{
	margin: 0;
}

.git_email p a {
    font-family: 'General Sans', sans-serif !important;
}

/* Footer CSS */

.site-footer {
    border-top: 1px solid #e0e0e080;
}

.inside-site-info {
    padding: 35px 40px;
}

.copyright-bar {
	color: #737373;
    width: 1140px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.copyright-bar a {
	font-family: var(--font-body) !important;
    text-decoration: none;
    color: #737373;
}

.copyright-bar a:hover {
    color: #000;
}

.copyright span {
    font-size: 14px;
}

.copyright span svg {
    width: 1rem;
    height: 1rem;
}

.ftr_lnks ul {
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 24px;
}

.ftr_lnks ul li a {
	font-family: var(--font-body) !important;
	font-size: 14px;
    text-decoration: none;
}

@media (max-width:480px){
	
	.main-navigation .main-nav ul{
		background: #fff !important;
	}
	
	.main-navigation .main-nav ul li a {
		line-height: 60px !important;
	}
	
	.main-navigation .main-nav ul .hm_btn a {
		display: block;
		background: transparent;
		color: #737373 !important;
		padding: 0;
		border-radius: 0;
	}

	.bg_circle {
		width: 17rem;
		height: 24rem;
	}
	
	.site-header .inside-header {
		background: #fff;
		width: 100%;
		padding: 10px 20px;
	}
	
	.st-projects-grid {
		grid-template-columns: 1fr !important
	}
	
	.lrg_crcl {
		width: 300px;
	}
	
	.copyright-bar {
		width: 100%;
		flex-direction: column;
		gap: 20px;
	}
}