/*
 Theme Name:   Flaime Studio Theme
 Theme URI:    https://flaimestudio.com
 Description:  GeneratePress child theme
 Template:     generatepress
 Version:      1.3
*/


:root {
  --neutral-50: #fff;
  --neutral-100: #fafafa;
  --neutral-150: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-950: #0a0a0a;

  --primary: #013240; /* Brand color */
  --primary-mid: #3A7A8C;
  --primary-light: #AED0D9;
  --primary-vlight: #D5E7EC;
  --background: #EFF3F6;
}

:root {
    --headline-font: 'Helvetica', sans-serif;
    --body-font: 'Helvetica', sans-serif;
	
	/* Line Heights */
    --lh-heading: 1.3;
    --lh-body: 1.6;

    /* Letter Spacing */
    --ls-heading: -0.02em;
    --ls-body: 0.01em;

    /* Font Weights */
    --fw-normal: 400;
    --fw-bold: 700;
	
	/* Bottom Margins */
	--mb-heading: 1rem;
    --mb-body: 1.5rem;

    /* Heading Font Sizes */
    --fs-heading-xxl: clamp(3rem, 0.778rem + 4.63vw, 4.25rem);
    --fs-heading-xl: clamp(3rem, 1.667rem + 2.778vw, 3.75rem);
    --fs-heading-l: clamp(2.25rem, 1.583rem + 1.389vw, 2.625rem);
    --fs-heading-m: clamp(1.75rem, 0.833rem + 1.389vw, 2rem);
    --fs-heading-s: clamp(1.25rem, 0.806rem + 0.926vw, 1.5rem);
    --fs-heading-xs: clamp(1.25rem, 1.21rem + 0.21vw, 1.38rem);
    --fs-heading-xxs: clamp(1.25rem, 1.21rem + 0.21vw, 1.38rem);
    
    /* Body Font Sizes */
    --fs-body-xl: clamp(1.27rem, 1.15rem + 0.59vw, 1.62rem);
    --fs-body-l: clamp(1.13rem, 1.05rem + 0.38vw, 1.35rem);
    --fs-body-m: 1.125rem;
    --fs-body-s: 1rem;
    --fs-body-xs: 0.8rem;
    
    /* Text Font Sizes */
    --fs-text-s: clamp(0.89rem, 0.87rem + 0.08vw, 0.94rem);
    --fs-text-xs: clamp(0.78rem, 0.79rem + -0.01vw, 0.79rem);
}

/* Heading Font Sizes */
.heading-xxl { font-size: var(--fs-heading-xxl); line-height: var(--lh-heading); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); margin-bottom: var(--mb-heading); }
h1, .heading-xl { font-size: var(--fs-heading-xl); line-height: var(--lh-heading); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); margin-bottom: var(--mb-heading); }
h2, .heading-l { font-size: var(--fs-heading-l); line-height: var(--lh-heading); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); margin-bottom: var(--mb-heading); }
h3, .heading-m { font-size: var(--fs-heading-m); line-height: var(--lh-heading); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); margin-bottom: var(--mb-heading); }
h4, .heading-s { font-size: var(--fs-heading-s); line-height: var(--lh-heading); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); margin-bottom: var(--mb-heading); }
h5, .heading-xs { font-size: var(--fs-heading-xs); line-height: var(--lh-heading); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); margin-bottom: var(--mb-heading); }
h6, .heading-xxs { font-size: var(--fs-heading-xxs); line-height: var(--lh-heading); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); margin-bottom: var(--mb-heading); }

/* Body Text */
p, .text-m { font-size: var(--fs-body-m); line-height: var(--lh-body); font-weight: var(--fw-normal); letter-spacing: var(--ls-body); margin-bottom: var(--mb-body); }
.text-xl { font-size: var(--fs-body-xl); line-height: var(--lh-body); font-weight: var(--fw-normal); letter-spacing: var(--ls-body); margin-bottom: var(--mb-body); }
.text-l { font-size: var(--fs-body-l); line-height: var(--lh-body); font-weight: var(--fw-normal); letter-spacing: var(--ls-body); margin-bottom: var(--mb-body); }
.text-s { font-size: var(--fs-body-s); line-height: var(--lh-body); font-weight: var(--fw-normal); letter-spacing: var(--ls-body); margin-bottom: var(--mb-body); }
.text-xs { font-size: var(--fs-body-xs); line-height: var(--lh-body); font-weight: var(--fw-normal); letter-spacing: var(--ls-body); margin-bottom: var(--mb-body); }

:root {
    /* Spacing Scale */
    --spacer-xxs: clamp(0.25rem, 0.2rem + 0.5vw, 0.5rem);
    --spacer-xs: clamp(0.5rem, 0.4rem + 0.75vw, 1rem);
    --spacer-sm: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    --spacer-md: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
    --spacer-lg: clamp(2rem, 1.6rem + 2vw, 2.5rem);
    --spacer-xl: clamp(2.5rem, 2rem + 2.5vw, 3rem);
}

@media (max-width: 480px) {
  .site-header .header-image {
    width: 180px;
    height: auto;
  }
}

.underline-padding {
  display: inline-block;
  border-bottom: 2px solid #013240; 
  padding-bottom: 1px; 
}

.topbar-sticky {
	position: sticky;
	z-index: 999;
	top: 0;
}

/* Fly-In Left */
@keyframes easeInFromLeft {
    from {
        transform: translateX(-50%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Fly-In Right */
@keyframes easeInFromRight {
  from {
    transform: translateX(50%); /* Start off-screen to the right */
    opacity: 0; /* Optional: Start invisible */
  }
  to {
    transform: translateX(0); /* End in the original position */
    opacity: 1; /* Optional: Fully visible */
  }
}


/* Fly-In Up */
@keyframes flyInUp {
    from {
        transform: translateY(50%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Header logo */
.header-image.is-logo-image {
  aspect-ratio: 600/171;
  animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hero-right {
	animation: easeInFromRight 0.7s ease-out;
	
}

.hero-left {
	animation: easeInFromLeft 0.7s ease-out;
	
}

.hero-up {
	animation: flyInUp 0.7s ease-out;
}

.top-start {
	animation: fadeIn 0.8s ease-out;
}

.logo-start {
	animation: fadeIn 0.3s ease-out;
}

.header-right {
	animation: easeInFromRight 0.6s ease-out
}

.service-left {
	animation: easeInFromLeft 0.6s ease-out;
}

.about-right {
	animation: easeInFromRight 0.6s ease-out;
}

/*.top-position {
	object-position: top;
}*/

.ar {
	aspect-ration: 1/1;
}

/* Remove animations for mobile devices */
@media (max-width: 768px) {
  .hero-right,
  .hero-left,
  .hero-up,
  .top-start,
  .logo-start,
  .header-right,
  .service-left,
  .about-right {
    animation: none !important;
    opacity: 1; /* Ensure elements are visible */
    transform: none; /* Reset transform property */
  }
}