/* Font Face Definitions */
@font-face {
  font-family: "Roboto Bold";
  src: url("../fonts/roboto/Roboto-Bold.ttf");
}

@font-face {
  font-family: "Roboto Regular";
  src: url("../fonts/roboto/Roboto-Regular.ttf");
  font-weight: normal;
}

@font-face {
  font-family: "Roboto Medium";
  src: url("../fonts/roboto/Roboto-Medium.ttf");
  font-weight: normal;
}

@font-face {
  font-family: "Roboto Light";
  src: url("../fonts/roboto/Roboto-Light.ttf");
  font-weight: normal;
}

:root {
  --font-heading-1-size: 56px;
  --font-heading-1-weight: 500; /* Medium */
  --font-heading-1-line-height: 110%;
  --font-heading-1-letter-spacing: -2%;

  --font-heading-2-size: 40px;
  --font-heading-2-weight: 500; /* Medium/Regular */
  --font-heading-2-line-height: 120%;
  --font-heading-2-letter-spacing: 0;

  --font-heading-3-size: 32px;
  --font-heading-3-weight: 500; /* Medium */
  --font-heading-3-line-height: 140%;
  --font-heading-3-letter-spacing: 0;

  --font-heading-4-size: 20px;
  --font-heading-4-weight: 500; /* Medium/Regular */
  --font-heading-4-line-height: 140%;
  --font-heading-4-letter-spacing: 0;

  --font-heading-5-size: 18px;
  --font-heading-5-weight: 500; /* Medium */
  --font-heading-5-line-height: 140%;
  --font-heading-5-letter-spacing: 0;

  --font-heading-6-size: 16px;
  --font-heading-6-weight: 500; /* Medium/Regular */
  --font-heading-6-line-height: 140%;
  --font-heading-6-letter-spacing: 0;

  --font-subtitle-size: 14px;
  --font-subtitle-weight: 500; /* Medium */
  --font-subtitle-line-height: 140%;
  --font-subtitle-letter-spacing: 0;

  --font-body-size: 16px;
  --font-body-weight: 400; /* Regular */
  --font-body-line-height: 140%;
  --font-body-letter-spacing: 0;

  --font-button-size: 16px;
  --font-button-weight: 400; /* Regular */
  --font-button-line-height: auto;
  --font-button-letter-spacing: 0;

  /* Text Colors */

  --color-black: #000000;
  --color-shadded-black: #231f20;
  --color-dark-gray: #555555;
  --color-gray: #6c6c70;
  --color-light-gray: #8e8e93;
  --color-off-white: #ebecf0;
  --color-white: #ffffff;
  --color-blue: #2848c1;
  /* --color-light-blue: #149EC2; */

  /* Dark Background Colors */

  --color-dark-blue: #149ec2;
  --color-dark-orange: #fcaf1b;

  /* Light Background Colors */
  --color-light-blue: #006ea6;
  --color-light-cream: #fffbe5;
  --color-light-sky: #dcf2fb;
  --color-off-light-sky: #cce2ed;
  --color-light-beige: #fee7dc;
  --color-red: #ED1C27;

  /* space alignments*/
  --spacing-80: 80px;
}

@media (max-width: 768px) {
  :root {
    --font-heading-1-size: 40px;
    --font-heading-1-line-height: 110%;
    --font-heading-1-letter-spacing: -2%;

    --font-heading-2-size: 32px;
    --font-heading-2-line-height: 110%;
    --font-heading-2-letter-spacing: 0;

    --font-heading-3-size: 24px;
    --font-heading-3-line-height: 110%;
    --font-heading-3-letter-spacing: 0;

    --font-heading-4-size: 20px;
    --font-heading-4-line-height: 110%;
    --font-heading-4-letter-spacing: 0;

    --font-heading-5-size: 18px;
    --font-heading-5-line-height: 140%;
    --font-heading-5-letter-spacing: 0;

    --font-heading-6-size: 16px;
    --font-heading-6-line-height: 140%;
    --font-heading-6-letter-spacing: 0;

    --font-body-size: 16px;
    --font-body-weight: 400; /* Regular */
    --font-body-line-height: 140%;
    --font-body-letter-spacing: 0;
  }
}
/* Reset some default browser styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Font-specific utility classes */
.roboto-bold {
  font-family: "Roboto Bold" !important;
}

.roboto-regular {
  font-family: "Roboto Regular" !important;
}

.roboto-medium {
  font-family: "Roboto Medium" !important;
}

.roboto-light {
  font-family: "Roboto Light" !important;
}
/* Usage examples */
h1 {
  font-size: var(--font-heading-1-size);
  font-weight: var(--font-heading-1-weight);
  line-height: var(--font-heading-1-line-height);
  letter-spacing: var(--font-heading-1-letter-spacing);
  font-family: "Roboto Medium" !important;
}

h2 {
  font-size: var(--font-heading-2-size);
  font-weight: var(--font-heading-2-weight);
  line-height: var(--font-heading-2-line-height);
  letter-spacing: var(--font-heading-2-letter-spacing);
  font-family: "Roboto Medium" !important;
  /*color:var(--color-shadded-black);*/
}

h3 {
  font-size: var(--font-heading-3-size);
  font-weight: var(--font-heading-3-weight);
  line-height: var(--font-heading-3-line-height);
  letter-spacing: var(--font-heading-3-letter-spacing);
  font-family: "Roboto Medium" !important;
}

h4 {
  font-size: var(--font-heading-4-size);
  font-weight: var(--font-heading-4-weight);
  line-height: var(--font-heading-4-line-height);
  letter-spacing: var(--font-heading-4-letter-spacing);
  font-family: "Roboto Medium" !important;
}

h5 {
  font-size: var(--font-heading-5-size);
  font-weight: var(--font-heading-5-weight);
  line-height: var(--font-heading-5-line-height);
  letter-spacing: var(--font-heading-5-letter-spacing);
  font-family: "Roboto Medium" !important;
}

h6 {
  font-size: var(--font-heading-6-size);
  font-weight: var(--font-heading-6-weight);
  line-height: var(--font-heading-6-line-height);
  letter-spacing: var(--font-heading-6-letter-spacing);
  font-family: "Roboto Medium" !important;
}
.h1 {
  font-size: var(--font-heading-1-size) !important;
  font-weight: var(--font-heading-1-weight) !important;
  line-height: var(--font-heading-1-line-height) !important;
  letter-spacing: var(--font-heading-1-letter-spacing) !important;
  font-family: "Roboto Medium" !important;
}

.h2 {
  font-size: var(--font-heading-2-size) !important;
  font-weight: var(--font-heading-2-weight) !important;
  line-height: var(--font-heading-2-line-height) !important;
  letter-spacing: var(--font-heading-2-letter-spacing) !important;
  font-family: "Roboto Medium" !important;
}

.h3 {
  font-size: var(--font-heading-3-size) !important;
  font-weight: var(--font-heading-3-weight) !important;
  line-height: var(--font-heading-3-line-height) !important;
  letter-spacing: var(--font-heading-3-letter-spacing) !important;
  font-family: "Roboto Medium" !important;
}

.h4 {
  font-size: var(--font-heading-4-size) !important;
  font-weight: var(--font-heading-4-weight) !important;
  line-height: var(--font-heading-4-line-height) !important;
  letter-spacing: var(--font-heading-4-letter-spacing) !important;
  font-family: "Roboto Medium" !important;
}

.h5 {
  font-size: var(--font-heading-5-size) !important;
  font-weight: var(--font-heading-5-weight) !important;
  line-height: var(--font-heading-5-line-height) !important;
  letter-spacing: var(--font-heading-5-letter-spacing) !important;
  font-family: "Roboto Medium" !important;
}

.h6 {
  font-size: var(--font-heading-6-size) !important;
  font-weight: var(--font-heading-6-weight) !important;
  line-height: var(--font-heading-6-line-height) !important;
  letter-spacing: var(--font-heading-6-letter-spacing) !important;
  font-family: "Roboto Medium" !important;
}

p {
  font-size: var(--font-body-size);
  font-weight: var(--font-body-weight);
  line-height: var(--font-body-line-height);
  letter-spacing: var(--font-body-letter-spacing);
  font-family: "Roboto Regular" !important;
}

/* Fallback Fonts */
/* h1,
h2,
h3,
h4,
h5,
h6{
  font-family: "Roboto Medium", Arial, sans-serif;
} */
p {
  margin: 0 !important;
}

/* body,
p,
span {
  font-family: "Roboto Regular", Arial, sans-serif;
} */
a {
  color: var(--color-black);
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: none;
  /* color: var(--color-black); */
}

/* text color start*/
.text-dark {
  color: var(--color-shadded-black) !important;
}
.text-black {
  color: var(--color-black) !important;
}
.text-dark-gray {
  color: var(--color-dark-gray) !important;
}
.text-gray {
  color: var(--color-gray) !important;
}
.text-red{
  color: var(--color-red) !important;
}
.text-light-gray {
  color: var(--color-light-gray) !important;
}
.text-off-white {
  color: var(--color-off-white) !important;
}
.text-white {
  color: var(--color-white) !important;
}
.text-blue {
  color: var(--color-blue) !important;
}
.text-theme {
  color: var(--color-light-blue) !important;
}
.text-orange {
  color: var(--color-dark-orange);
}
.text-light-blue {
  color: var(--color-light-blue);
}
.text-off-sky {
  color: var(--color-off-light-sky);
}
/* text color end */

/* background-color-start */

/* Dark Background Colors */
.bg-dark-blue {
  background-color: var(--color-dark-blue) !important;
}
.bg-dark-orange {
  background-color: var(--color-dark-orange) !important;
}
.bg-white {
  background-color: var(--color-white) !important;
}

/* Light Background Colors */
.bg-light-blue {
  background-color: var(--color-light-blue) !important;
}
.bg-light-cream {
  background-color: var(--color-light-cream) !important;
}
.bg-light-sky {
  background-color: var(--color-light-sky) !important;
}
.bg-light-beige {
  background-color: var(--color-light-beige) !important;
}

/* background-color-end */

/* border-color-start */
.border-blue {
  border-color: var(--color-light-blue) !important;
}
.border-dark-gray {
  border-color: var(--color-dark-gray) !important;
}
.border-gray {
  border-color: var(--color-gray) !important;
}
.border-light-gray {
  border-color: var(--color-light-gray) !important;
}
.border-of-white {
  border-color: var(--color-off-white) !important;
}

/* border-color-end */

/* Vertical Spacing start */
.vertical-space {
  margin-top: var(--spacing-80) !important;
  margin-bottom: var(--spacing-80) !important;
}

.pointer {
  cursor: pointer;
}
/* Vertical Spacing end */

.font-weight-500 {
  font-weight: 500;
}
.font-weight-600 {
  font-weight: 600;
}

/* Button Styles */
.btn {
  /*padding: 0 20px !important;*/
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-primary {
  background-color: #fcaf1b !important;
  color: var(--color-shadded-black) !important;
  border: none !important;
}

.btn-secondary {
  background-color: var(--color-white) !important;
  color: var(--color-black) !important;
  border: 1px solid #fcaf1b !important;
}

.btn-primary:hover {
/*   background-color: #e59e0d !important; Slightly darker shade */
}

.btn-secondary:hover {
  background-color: #f1f1f1 !important;
}

.btn:focus {
  outline: none !important;
  box-shadow: none;
}
.btn:focus-visible {
  outline: none !important;
  box-shadow: none;
}
input:focus,
select:focus,
select:focus-visible {
  outline: none !important;
  box-shadow: none;
}
input:focus-visible {
  outline: none !important;
  box-shadow: none;
}
input::placeholder {
  color: inherit; /* Inherit color from the input */
  opacity: 0.7; /* Make it slightly lighter */
}

body > section:first-of-type {
  margin-top: 0 !important;
}

/* Animation classes start*/

/* Arrow movement Animation */
.arrow-animation {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: black;
  position: relative;
  transition: color 0.3s ease-in-out;
}

.arrow-animation .arrow {
  display: inline-block;
  margin-left: 5px;
  transition: transform 0.3s ease-in-out;
}

.arrow-animation:hover {
  color: #007bff;
}

.arrow-animation:hover .arrow {
  transform: translate(5px, -5px);
}
/* Arrow movement Animation */

/* Underline Animation */
.underline-hover {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.underline-hover::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 2px;
  background-color: rgba(
    var(--bs-warning-rgb),
    var(--bs-text-opacity)
  ) !important;
  transition: width 0.3s ease-in-out;
}

.underline-hover:hover::after {
  width: 100%;
}
/* Underline Animation */

/* Animation classes end*/
.z-2 {
  z-index: 2;
}
.z-1 {
  z-index: 1;
}

.bg-brush-light-yellow {
  background-image: url(../images/brush-strokes.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
.brush-underline-yellow,
.brush-underline-sky,
.brush-underline-white {
  position: relative;
}
.brush-underline-yellow::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 100%;
  background-image: url(../images/yellow-underline-img.svg);
  height: 12px;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
}
.brush-underline-sky::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 100%;
  background-image: url(../images/blue-underline.svg);
  height: 12px;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
}
.brush-underline-white::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 100%;
  background-image: url(../images/white-underline.svg);
  height: 12px;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
}

/* banner background */
.yellow-bg {
  background-image: url(../images/yellow-bg.svg);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100%;
  height: 350px;
}

.yellow-bg h1 {
  font-size: var(--font-heading-2-size);
}

.yellow-bg-color {
  background: #fffae4;
}
.teal-bg-color {
  background: #dcf2fb;
}
.darkyellow-bg-color {
  background: #fcaf1b;
}
.darkblue-bg-color {
  background: #006ea6;
  color: var(--color-white);
}
/* brush stroke effect background */
.bg-brush-blue {
    background-image: url(/wp-content/themes/tally/assets/images/brush-blue.svg);
    background-repeat: no-repeat;
	background-size:contain;
}
.bg-brush-yellow {
    background-image: url(/wp-content/themes/tally/assets/images/customer/brush.svg);
    background-repeat: no-repeat;
	background-size:contain;
}
.image-hover-scale {
  transition: transform 0.3s ease-in-out;
}

.image-hover-scale:hover {
  transform: scale(1.1);
}


.banner-headings,
.headings {
  font-size: var(--font-heading-2-size);
  margin-top: 30px;
  margin-bottom: 30px !important;
}
.ul_list_bullet_style li {
  font-size: var(--font-body-size);
  margin-top: 1rem;
}
.border-radius-10{border-radius:10px;}
.btn-primary img, .btn-primary svg, .btn-secondary img, .bg-transparent img, .applyNowBtn img  {transition: transform 0.3s ease-in-out; cubic-bezier(0.25, 2, 0.5, 1);margin-left: 3px;}
.btn-primary:hover img, .btn-primary:hover svg, .btn-secondary:hover img, .btn.bg-transparent:hover img, .applyNowBtn:hover img{transform: translateX(5px) translateY(-5px);}

a.text-orange, a.text-blue, a.text-orange{display: inline-flex;align-items: center;text-decoration: none;transition: color 0.3s ease-in-out;}
a.text-orange img, a.text-blue img, a.text-orange img{transition: transform 0.3s ease-in-out;margin-left: 5px;}
a.text-orange:hover img, a.text-blue:hover img, a.text-orange:hover img{transform: translateX(5px) translateY(-5px); /* Moves up-right smoothly */}