/*
        Theme Name: Del Vecchio
        Description: Custom Theme<br><br>Get your custom Hello Child theme generated at <a href="https://hellochild.tonyjr.me">hellochild.tonyjr.me</a>
        Author: Springer Studios
        Author URI: https://www.springerstudios.com/
        Template: hello-elementor
        Version: 1.0.0
        */

:root {
--type-sm:   clamp(13px, calc(0.0647vw + 12.7573px), 14px);
  --type-base: clamp(16px, calc(0.1942vw + 15.2718px), 19px);
  --type-md:   clamp(20px, calc(0.3236vw + 18.7864px), 25px);
  --type-lg:   clamp(25px, calc(0.5825vw + 22.8155px), 34px);
  --type-xl:   clamp(31px, calc(0.9061vw + 27.6019px), 45px);
  --type-xxl:  clamp(39px, calc(1.3592vw + 33.9029px), 60px);
  --type-xxxl: clamp(49px, calc(2.0065vw + 41.4757px), 80px);
  --type-4xl:  clamp(61px, calc(2.9773vw + 49.8350px), 107px);
   --space-3xs: clamp(0.25rem, 0.2244rem + 0.1136vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4489rem + 0.2273vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.6733rem + 0.3409vw, 0.9375rem);
  --space-s: clamp(1rem, 0.8977rem + 0.4545vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.3466rem + 0.6818vw, 1.875rem);
  --space-l: clamp(2rem, 1.7955rem + 0.9091vw, 2.5rem);
  --space-xl: clamp(3rem, 2.6932rem + 1.3636vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.5909rem + 1.8182vw, 5rem);
  --space-3xl: clamp(5rem, 4.4886rem + 2.2727vw, 6.25rem);
  --space-4xl: clamp(6rem, 5.3864rem + 2.7273vw, 7.5rem);
  --space-5xl: clamp(7rem, 6.2841rem + 3.1818vw, 8.75rem);
  --space-6xl: clamp(8rem, 7.1818rem + 3.6364vw, 10rem);
  --space-7xl: clamp(9rem, 8.0795rem + 4.0909vw, 11.25rem);
  --space-8xl: clamp(10rem, 8.9773rem + 4.5455vw, 12.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(5px, 2.9545px + 0.5682vw, 10px);
  --space-2xs-xs: clamp(9px, 6.5455px + 0.6818vw, 15px);
  --space-xs-s: clamp(14px, 11.5455px + 0.6818vw, 20px);
  --space-s-m: clamp(18px, 13.0909px + 1.3636vw, 30px);
  --space-m-l: clamp(27px, 21.6818px + 1.4773vw, 40px);
  --space-l-xl: clamp(36px, 26.1818px + 2.7273vw, 60px);
  --space-xl-2xl: clamp(54px, 43.3636px + 2.9545vw, 80px);
  --space-2xl-3xl: clamp(72px, 52.3636px + 5.4545vw, 120px);
  }
/* For browsers that don't support clamp */
@supports not (font-size: clamp(1rem, 1vi, 1rem)) {
  :root {
		--type-sm: 13px;
		--type-base: 16px;
		--type-md: 20px;
		--type-lg: 25px;
		--type-xl: 31px;
		--type-xxl: 39px;
		--type-xxxl: 49px;
		--type-4xl: 61px;
		--type-5xl: 76px;
		--type-6xl: 95px;
		--type-7xl: 119px;
		--type-8xl: 149px;
  }
  @media screen and (min-width: 1280px) {
    :root {
			--type-sm: 14px;
			--type-base: 19px;
			--type-md: 25px;
			--type-lg: 34px;
			--type-xl: 45px;
			--type-xxl: 60px;
			--type-xxxl: 80px;
			--type-4xl: 107px;
			--type-5xl: 142px;
			--type-6xl: 189px;
			--type-7xl: 252px;
			--type-8xl: 337px;
    }
  }
}

.carmel {
  position: relative;
  color: inherit;
  text-decoration: none;
  border-bottom: 3px solid #E3AF64;
  transition: color 0.25s ease;
}

.carmel::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #E3AF64;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
  z-index: -1; /* keeps text above the bg */
}


.carmel:hover {
  color: #fff; /* text turns white */
}
.carmel:hover::after {
  transform: scaleX(1);
}