/*
 Theme Name:   BlankSlate Child
 Theme URI:    http://example.com
 Description:  A custom child theme for BlankSlate.
 Author:       Your Name
 Author URI:   http://example.com
 Template:     blankslate
 Version:      1.0.0
*/

/* Custom CSS goes below this line */

/* ===============================
   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;
}

.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 */

.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;
    color: #141414;
    font-size: 15px;
    font-weight: 500;
	padding-left: 17px;
    padding-right: 17px;
}

.hm_btn{
	margin-left: 20px;
}

.hm_btn a {
    background-color: #FF571A;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #141414 !important;
    border-width: 1px solid #FF571A;
    border-radius: 2px;
    padding: 14px 28px 14px 28px;
}

.hm_btn a:hover {
	background-color: #FF7340;
    color: #141414;
    border-color: #FF7340;
}

.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;
}

.the_faq .e-n-accordion-item-title {
    padding: 20px 10px !important;
    border-top: 1px solid rgb(220, 220, 220) !important;
}

.price div {
    font-family: var(--font-heading) !important;
}

.price div:before {
    content: 'from';
    font-size: 14px;
    font-weight: 500;
    color: rgb(90, 90, 90);
    letter-spacing: 0px;
    margin-right: 5px;
}

/* Contact Form 7 — Project Contact Form */
.project-contact-form {
    width: 100%;
    color: #ffffff;
    font-family: inherit;
	display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Remove default Contact Form 7 spacing */
.project-contact-form .project-form-field {
    width: 100%;
    margin: 0 0 20px;
}

.project-contact-form .project-form-field label {
    display: block;
    margin: 0 0 8px;
    color: rgb(163, 163, 163);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Text, email and select fields */
.project-contact-form input[type="text"],
.project-contact-form input[type="email"],
.project-contact-form select {
    display: block;
    width: 100%;
    height: 30px;
    margin: 0;
    padding: 2px 3px 9px;
    border: 0;
    border-bottom: 1px solid #555555;
    border-radius: 0;
    outline: none;
    background-color: transparent;
    box-shadow: none;
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

/* Dropdown */
.project-contact-form select {
	font-size: 17px;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 24px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 3px center;
    background-size: 13px;
}

.project-contact-form select option {
    color: #fafafa;
    background-color: #141414;
    font-size: 17px;
}

/* Textarea */
.project-contact-form textarea {
    display: block;
    width: 100%;
    height: 72px;
    min-height: 72px;
    margin: 0;
    padding: 8px 3px;
    border: 0;
    border-bottom: 1px solid #555555;
    border-radius: 0;
    outline: none;
    background-color: transparent;
    box-shadow: none;
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
}

/* Focus effect */
.project-contact-form input[type="text"]:focus,
.project-contact-form input[type="email"]:focus,
.project-contact-form select:focus,
.project-contact-form textarea:focus {
    border-bottom-color: #ffffff;
    outline: none;
    box-shadow: none;
}

/* Submit button */
.project-contact-form input[type="submit"] {
    font-family: var(--font-heading) !important;
    background-color: #FF571A00;
    font-size: 16px;
    font-weight: 600;
    fill: #fafafa;
    color: #fafafa;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #fafafa;
    border-radius: 2px 2px 2px 2px;
    padding: 14px 28px 14px 28px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.project-contact-form input[type="submit"]:hover {
    background-color: #fafafa;
    color: #141414;
}

/* Privacy note */
.project-contact-form .project-form-note {
    margin: 15px 0 0;
    color: rgb(163, 163, 163);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

/* Contact Form 7 validation messages */
.project-contact-form .wpcf7-not-valid {
    border-bottom-color: #e57373 !important;
}

.project-contact-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 5px;
    color: #e57373;
    font-size: 11px;
}

.project-contact-form .wpcf7 form .wpcf7-response-output {
    margin: 15px 0 0;
    padding: 10px;
    border: 1px solid #777777;
    color: #ffffff;
    font-size: 12px;
}

/* Remove extra default spacing */
.project-contact-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.project-contact-form .wpcf7-spinner {
    vertical-align: middle;
}

/* Mobile */
@media (max-width: 480px) {
    .project-contact-form {
        max-width: 100%;
    }
}

/* Footer CSS */

.site-footer {
    background: #fafafa;
}

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

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

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

.copyright-bar a:hover {
    color: rgb(163, 163, 163);
}

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

.ftr_lnks ul {
	padding: 0;
    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: inline-block;
		background: transparent; 
		color: #141414 !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;
	}
	
	.ftr_lnks ul {
		justify-content: center;
	}
}