/* Core Custom Styles and Color Variables */
@font-face {
  font-family: "Polin";
  src: url("../fonts/Polin-PolinVF.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --color-gold: #c59b27;
  --color-gold-hover: #a8821f;
  --color-dark: #111111;
  --color-bg-card: #fcfbf9;
}

body {
  font-family: "Heebo", sans-serif;
  background-color: #f9fafb;
  color: #1f2937;
  margin: 0;
  padding: 0;
  direction: rtl; /* Set text direction to right-to-left */
}
* {
  direction: rtl;
}
/* Gradient overlay for text contrast on Hero background */
.hero-gradient {
  background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.56) 44%,
    rgba(255, 255, 255, 0.78) 100%
  );
}
/* Brand Accent Classes */
.text-gold {
  color: var(--color-gold);
}

.border-gold {
  border-color: var(--color-gold);
}

/* Service Card Styles */
.card-service {
  background-color: var(--color-bg-card);
  border-radius: 40px;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.card-service:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
}

section.hero {
  width: 100%;
  font-family: "Polin", "Heebo", sans-serif;
}
header {
  direction: ltr;
  position: sticky;
  top: 0;
  margin-bottom: -7rem;
}
/* .fade-border-card {
  border-image: linear-gradient(
      to bottom,
      #CA9F31 0%,
      rgba(197, 162, 88, 0.2) 100%
    )
    1;
  * Mask ensures rounded corners remain smooth with border-image *
  mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
} */
@font-face {
  font-family: "Polin";
  src: url("/assets/fonts/Polin-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Polin";
  src: url("/assets/fonts/Polin-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

body {
  font-family: "Polin", sans-serif;
  font-weight: 400;
}

h1 {
  font-family: "Polin", sans-serif;
  font-weight: 700;
}

.hero-video-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 45%,
    rgba(255, 255, 255, 0.44) 56%,
    rgba(255, 255, 255, 1) 78%
  );
  z-index: 10;
  pointer-events: none;
}
/* Base Logo Sprite Class */
.logo-sprite {
  background-image: url("/assets/images/logo.png");
  background-repeat: no-repeat;
  display: inline-block;
}

/* 1. Top Element: Pyramid Icon (Right side in RTL) */
.logo-icon {
  width: 100px;
  height: 65px;
  background-size: 160px auto;
  background-position: center top;
}

/* 2. Bottom Element: Text & Tagline (Left side in RTL) */
.logo-text {
  width: 220px;
  height: 65px;
  background-size: 240px auto;
  background-position: center bottom;
}
/* 1. Define the font family using your local .ttf files */
@font-face {
  font-family: "Google Sans";
  src: url("/assets/fonts/GoogleSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Google Sans";
  src: url("/assets/fonts/GoogleSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Google Sans";
  src: url("/assets/fonts/GoogleSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Google Sans";
  src: url("/assets/fonts/GoogleSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

/* 2. Create the custom CSS class */
.font-google {
  font-family: "Google Sans", sans-serif !important;
}
@font-face {
  font-family: "Polin";
  src: url("/assets/fonts/Polin-Extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
}

.font-polin {
  font-family: "Polin", sans-serif !important;
}
@font-face {
  font-family: "Polin";
  src: url("/assets/fonts/Polin-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: "Polin";
  src: url("/assets/fonts/Polin-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

body,
button,
input,
select,
textarea {
  font-family: "Polin", "Heebo", sans-serif !important;
}