/* Custom font declarations for Elance */

/* Playfair Display - Elegant serif font for headings */
@font-face {
  font-family: 'Playfair Display';
  src: url(/assets/PlayfairDisplay-Regular-6a29caecd368ccf1156f98443711c219f72722d5b47f52395ee8284229495b97.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url(/assets/PlayfairDisplay-Italic-a553bf7b78591c21f5c07a2b9fb46d11ca7b29b5777fb1b9b3b8b9832c86e16d.ttf) format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url(/assets/PlayfairDisplay-Medium-1a71ecb60959f93083ed02ecb49bcedc636bcdf0e3a618c46e699d3b8a062527.ttf) format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url(/assets/PlayfairDisplay-MediumItalic-9dad504b8007607099e9f4d348660c95621c418872b84a7272f61e7da1c8e9c5.ttf) format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url(/assets/PlayfairDisplay-SemiBold-51e6aefa02ec5bc93864e58446f29a955f271d6ca0e5d6956ba2354bd90a9a06.ttf) format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url(/assets/PlayfairDisplay-SemiBoldItalic-fa4f8d4f24ac75442b5ba82f6dfeacb61c182b82a4f23eaef6bcc76373ca5d7f.ttf) format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url(/assets/PlayfairDisplay-Bold-3b9fceb3724ff77470394895096b30fefa6afd2bf2b0713927b01527d11d3073.ttf) format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url(/assets/PlayfairDisplay-BoldItalic-3dd670d08a3e79c62937e6a287961edbba085c61115a9a67ad7ee7129bbae593.ttf) format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url(/assets/PlayfairDisplay-ExtraBold-4876b66977e083d608f9bc0f52309e717014007dcfd6a7f3b8514f4c1ba9b3df.ttf) format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url(/assets/PlayfairDisplay-ExtraBoldItalic-bac41bde2f855fecc0be82e1ba2d96051a26027297492367e736c68e487489f8.ttf) format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url(/assets/PlayfairDisplay-Black-dd44bcf61f865f24a3e126789f9b43ebe7fdf5b2e2b309594145d15cdf24611e.ttf) format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url(/assets/PlayfairDisplay-BlackItalic-7e6bc74103db249c9c575ed9635c7858fa383a21268336f30549a124abd04243.ttf) format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Roboto - Clean and modern sans-serif font for body text */
@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-Thin-1d7f650144c339761845ca7562072815285f1f52c57af3d041e9c3a44ea7241b.ttf) format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-ThinItalic-db5e58f7b3adcaa25cac0c238182ef9a5ba7b021b61616e46070d01e7e0964ed.ttf) format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-ExtraLight-7ef37acdc4d39bcc3e473c17a7b6e481631904bfca26245da44b1f7997e895c4.ttf) format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-ExtraLightItalic-3960befe80ea8b4acc43c7c16935abd6b2ca306410eb6888e8a998219ea9d97e.ttf) format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-Light-f9fa74579e22ed6f4f54e7a2e89883b0f6db5779bb7961e04eb60741bf3b730b.ttf) format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-LightItalic-8c1e15b3ba6d40d6cc06b085903a461e87529d94dab90cc5cf80d24cebe12bc3.ttf) format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-Regular-1d499b9fdd81448eef4465e137c3596e31f3f6c4bfce56287663f9c3daf817e0.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-Italic-2cdc6b9f65ac58b2071157fd81180cdc633c6f5f6a44b5825b19490f07d28bca.ttf) format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-Medium-bb5c62baa4f72ab863fd79b1639555161bda16a39e710e3a02fa30450f22840d.ttf) format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-MediumItalic-8130fe254302713f42dbcd234d7e37f396fe647fc92396f7d50ff3ecdb001e95.ttf) format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-SemiBold-7821768b51b7f000aeb3473b2994c3b6980d0c55f1a71a8775df039912e3c49c.ttf) format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-SemiBoldItalic-6bd4c3d884d76af30c352d5a6b4ab60f3fd36d7bc0997aab597e96e0fa2ba693.ttf) format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-Bold-35280a2df0bbb91f6e7f87352afab5ba78f418331e38f02502bbfe0c65ed9335.ttf) format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-BoldItalic-1d1d3fef3fb598507178e912284145b02390568df08b3a2c2c8d59a280446899.ttf) format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-ExtraBold-b20a50a666eb4fa6a5b17cb80b0d3d29296f0e2632f8fb866ae9e0ebc8bd5f87.ttf) format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-ExtraBoldItalic-49fb8f1f62fd4da60d65879775d2dc3cb1c14b30b999fdbbe2d1e9e4a19df2b4.ttf) format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-Black-5c85a7ef165ad659cffb43c1b2a456058827b510c0e2775775a443127b61f3c2.ttf) format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto-BlackItalic-9e77e9a593eebc1f976f47f8c98b609e2ba42dab6a8b7f8af395c9399fbb1d40.ttf) format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Roboto Condensed - Compact version of Roboto */
@font-face {
  font-family: 'Roboto Condensed';
  src: url(/assets/Roboto_Condensed-Thin-18c2c2f63b64529f21feda611f93f2688a9839e1450abbf945ef3c01719201a7.ttf) format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url(/assets/Roboto_Condensed-ThinItalic-5135aebe28f69b1f2c713259ecf98db4258b11df7f79d378e9dcf3e36c19aa89.ttf) format('truetype');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url(/assets/Roboto_Condensed-ExtraLight-5986d2039a6281e8bd8397b13f520ba8a6225caab3216b193de8af8b74b25d9b.ttf) format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url(/assets/Roboto_Condensed-ExtraLightItalic-20f205552d1084e4085878bb6dd7e463334b019abb87147704e974761230ff05.ttf) format('truetype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url(/assets/Roboto_Condensed-Light-c9aadf2b80df9fa613608b44e8c0c188dd7800dce81838f3112aae67890b0764.ttf) format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url(/assets/Roboto_Condensed-LightItalic-a72472a644d1d8d4276ff6a6fc1e226c063dad6b39b335f10f53800cabe91fd6.ttf) format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url(/assets/Roboto_Condensed-Regular-c880142e28f01d6b1c656eaf284ab3cdb46f3679aba29cecc3fe4d5ca5cfad5c.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url(/assets/Roboto_Condensed-Italic-40c92acae759a7be86ae49b2a205df4ceb8dbf96f44bb059c2ebcf8dc1d11769.ttf) format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url(/assets/Roboto_Condensed-Medium-ba8444d8b36f002e3e44356db5ee99acd150352a38b3cebaccd4e813afe83092.ttf) format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url(/assets/Roboto_Condensed-MediumItalic-069a46f54a69719af5a07712b3f91c743a840ccffcc6715ca325d34364e04e68.ttf) format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url(/assets/Roboto_Condensed-SemiBold-1401bcee047a3d8132767fde4059bec2cfc83ab81e317f3294c2723357250266.ttf) format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url(/assets/Roboto_Condensed-SemiBoldItalic-a66f03b8700784e6531103a94b101b4a4ff9dbb9bbd3e55992207d470183ac50.ttf) format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url(/assets/Roboto_Condensed-Bold-fe9f4bff5219f32b56956f7112cef169fe09c57199f1a79bfc7a04b6bc7d5046.ttf) format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url(/assets/Roboto_Condensed-BoldItalic-0eb49dc85a5b59f5564587b2802bdc1641aff7781542c2e46e0ba9abc4dd3b9d.ttf) format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url(/assets/Roboto_Condensed-ExtraBold-5fe9b110fe0cc4fb04bcfb3c96c68b9f5e828bed99844109d1f471de11f0ac06.ttf) format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url(/assets/Roboto_Condensed-ExtraBoldItalic-126807955fb7790f506de2db453a4ec9194fa2364ab7366f0e43c334b94ed8a2.ttf) format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url(/assets/Roboto_Condensed-Black-e71bfdfa3f8716eb288f75533f9ae0c0f10895080aa758bc40b8b21fa086c7b1.ttf) format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Condensed';
  src: url(/assets/Roboto_Condensed-BlackItalic-a1821afb4d197c00faa0b33561f76298b62f3677ba7142062d64797570fbdb16.ttf) format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Space Grotesk - Modern geometric sans-serif */
@font-face {
  font-family: 'Space Grotesk';
  src: url(/assets/SpaceGrotesk-Light-79625fd9d1160c503da327dd502f962516df1588b4e9a95412bcff72578aa1e2.ttf) format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url(/assets/SpaceGrotesk-Regular-dc409bfef9f7fb6032a5bbc174dada4024da77a0041eb891eca8406b0a87c4be.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url(/assets/SpaceGrotesk-Medium-0f7be692ff3fdd29f170cb79fb20eb6673804a575750f03eccec331d724da8d6.ttf) format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url(/assets/SpaceGrotesk-SemiBold-eeee025df94958087fa3e11d297f9eafa5bea74486ae161e9dedd8f339616ca8.ttf) format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Grotesk';
  src: url(/assets/SpaceGrotesk-Bold-d83dd5889aac1c6d9fcb38f8542b5a6cbdfe09dca0960d06f00d226ee4ae65f0.ttf) format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/* Carousel Styles */
.carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: 600px;
}

.carousel-slide {
  transition: opacity 0.5s ease-in-out;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.carousel-slide.hidden {
  display: none;
}

/* Navigation Arrows */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease, opacity 0.3s ease;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.carousel-arrow:hover {
  background-color: rgba(255, 255, 255, 1);
  transform: translateY(-50%) scale(1.1);
}

.carousel-arrow.left {
  left: 20px;
}

.carousel-arrow.right {
  right: 20px;
}

.carousel-arrow svg {
  width: 24px;
  height: 24px;
  fill: #1a1a1a;
}

/* Pagination Dots */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-dot:hover {
  background-color: rgba(255, 255, 255, 0.6);
  transform: scale(1.2);
}

.carousel-dot.active {
  background-color: white;
  border-color: white;
  transform: scale(1.3);
}

/* Slide Content Styles */
.slide-images-container {
  display: flex;
  flex-direction: row;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.slide-images-container.single-image {
  max-width: 900px;
}

.slide-image-wrapper {
  background-color: white;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  flex: 1;
}

.slide-image-wrapper img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.slide-text {
  text-align: center;
  color: white;
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 24px;
  padding: 0 20px;
}

.slide-bullets {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 20px;
}

.slide-bullets ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.slide-bullets li {
  color: white;
  font-size: 1.125rem;
  font-weight: 500;
  padding: 16px 0;
  position: relative;
  padding-left: 40px;
}

.slide-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #DCB630;
  font-size: 1.5rem;
  font-weight: bold;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .slide-images-container {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .carousel-arrow {
    width: 40px;
    height: 40px;
  }

  .carousel-arrow.left {
    left: 10px;
  }

  .carousel-arrow.right {
    right: 10px;
  }

  .slide-text {
    font-size: 1rem;
  }

  .slide-bullets li {
    font-size: 1rem;
    padding-left: 30px;
  }
}
.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #DCB631;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px #DCB631;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #DCB631;
  }
}

/* CSS Custom Properties for Phone Animations */
:root {
  /* Base phone dimensions */
  --phone-width: 24rem;
  --phone-height: 38rem;

  /* Phone positioning offsets */
  --phone-right-offset: 30rem;
  --phone-left-offset: 22rem;

  /* Phone size ratios */
  --phone-small-ratio: 0.8; /* 80% of base size */
  --phone-shrink-ratio: 0.6; /* Shrink ratio for phone size in open state */

  /* Vertical positioning */
  --phone-center-y: 50%;
  --phone-end-position-y-offset: -1rem; /* How much to lower center phone */
  --phone-side-position-y-offset: 1rem; /* How much to lower side phones */

  /* Background sizing */
  --phone-bg-size-default: 100vw;
  --phone-bg-size-open: 60vw;
  --phone-bg-size-small: 35vw;

  /* Calculated values */
  --phone-small-width: calc(var(--phone-width) * var(--phone-small-ratio));
  --phone-small-height: calc(var(--phone-height) * var(--phone-small-ratio));
  --phone-open-width: calc(var(--phone-width) * var(--phone-shrink-ratio));
  --phone-open-height: calc(var(--phone-height) * var(--phone-shrink-ratio));
}

.section-landing-animation {

  .overlay-openable {
    position: absolute;
    top: 55%;
    left: calc(50% - 10rem);
    right: calc(50% - 10rem);
    bottom: 0;
    transition: all 0.8s ease-in-out;
  }

  .overlay-openable.open {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0;
  }

  /* Base phone container */
  .phone-container {
    background-size: 100vw auto;
    background-position: center -85vh;
    width: var(--phone-width);
    height: var(--phone-height);
    position: absolute;
    top: var(--phone-center-y);
    left: calc(50% - var(--phone-width) / 2);
    transition: all 0.8s ease-in-out;
  }

  /* Phone size modifiers */
  .phone-small {
    width: var(--phone-small-width);
    height: var(--phone-small-height);
    background-position: center center;
    background-size: contain;
  }

  /* Phone positioning modifiers */
  .phone-appear-right {
    left: calc(50% - var(--phone-width) / 2 + var(--phone-right-offset));
    opacity: 0;
  }

  .phone-appear-left {
    left: calc(50% - var(--phone-width) / 2 - var(--phone-left-offset));
    opacity: 0;
  }

  /* Open state for center phone */
  .phone-container.open {
    background-position: center center;
    background-size: var(--phone-bg-size-open) auto;
    width: var(--phone-open-width);
    height: var(--phone-open-height);
    top: calc(var(--phone-center-y) + var(--phone-end-position-y-offset));
    left: calc(50% - var(--phone-open-width) / 2);


    &.phone-small {
      width: calc(var(--phone-open-width) * var(--phone-small-ratio));
      height: calc(var(--phone-open-height) * var(--phone-small-ratio));
      background-position: center center;
      background-size: contain;
    }
  }

  /* Open state for right phone */
  .phone-appear-right.open {
    left: calc(50% - var(--phone-open-width) / 2 + var(--phone-open-width) + 1rem);
    top: calc(var(--phone-center-y) + var(--phone-side-position-y-offset));
    opacity: 1;
  }

  /* Open state for left phone */
  .phone-appear-left.open {
    left: calc(50% - var(--phone-open-width) / 2 - var(--phone-small-width) + 7rem);
    top: calc(var(--phone-center-y) + var(--phone-side-position-y-offset));
    opacity: 1;
  }

  /* Text elements animations */
  .hero-title {
    transition: all 0.8s ease-in-out;
  }

  .hero-title.open {
    transform: translateX(-50%) scale(0.7);
    top: 0 !important;
    opacity: 0;
  }

  .hero-description {
    transition: all 0.8s ease-in-out;
  }

  .hero-description.open {
    transform: scale(0.9);
    top: calc(25% - 2rem) !important;
    left: 15% !important;
    width: 35% !important;
    opacity: 0;
  }

  .hero-button {
    transition: all 0.8s ease-in-out;
  }

  .hero-button.open {
    transform: scale(0.9);
    top: calc(30% + 1rem) !important;
    left: 15% !important;
    opacity: 0;
  }

  /* Overlay content animation */
  .overlay-content.open {
    opacity: 1 !important;
    padding-top: 4rem !important;
  }

  /* Phone cards styling */
  .phone-card {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    background: white;
    border-radius: 1.5rem;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.8s ease-in-out;
  }

  /* Statistics Card Animations */
  .stats-card-front,
  .stats-card-back {
    transition: all 0.3s ease-in-out;
    backface-visibility: hidden;
    perspective: 1000px;
  }

  .stats-card-front {
    transform: rotateY(0deg);
    opacity: 1;
  }

  .stats-card-back {
    transform: rotateY(180deg);
    opacity: 0;
  }

  /* Hover effects for statistics cards */
  .phone-container:hover .stats-card-front {
    transform: scale(1.02);
  }


  /* Enhanced text shadows for better readability */
  .stats-card-front .text-8xl,
  .stats-card-front .text-6xl {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }

  .stats-card-front p {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  }

  /* Subtle gradient overlay for better text visibility */
  .stats-card-front::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.1) 0%,
      rgba(0, 0, 0, 0.2) 50%,
      rgba(0, 0, 0, 0.4) 100%
    );
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
  }

  .stats-card-front > * {
    position: relative;
    z-index: 2;
  }

  /* Pulse animation for statistics when not flipped */
  .phone-container .stats-card-front {
    animation: subtlePulse 3s ease-in-out infinite;
  }

  @keyframes subtlePulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.02);
    }
  }

  /* Stop pulse animation when hovering */
  .phone-container:hover .stats-card-front {
    animation: none;
    transform: scale(1.02);
  }

  /* Cards move with their parent containers - no additional transforms needed since they're positioned relative to their containers */
  @media (min-width: 767px) {
    .phones-wrapper {
      height :0;
      top: 55% !important;
    }

    .overlay-content h2 {
      font-size: 3rem !important;
    }
  }


  .overlay-content img {
    height: 5rem;
    margin-bottom: 1rem;
  }

  .overlay-content h2 {
    font-size: 1.875rem;
    margin-bottom: 1rem;
  }

  .overlay-content .max-w-4xl {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .overlay-content p {
    font-size: 0.875rem;
    line-height: 1.4;
    margin-bottom: 1.5rem;
  }

  .overlay-content button {
    margin-bottom: 2rem;
  }

  /* Mobile phone scrolling wrapper */
  @media (max-width: 767px) {
    /* Disable all transitions on mobile to prevent loading animations */
    .overlay-openable,
    .phone-container,
    .hero-title,
    .hero-description,
    .hero-button,
    .overlay-content,
    .phone-card {
      transition: none !important;
    }


    .phones-wrapper {
      /* Reset positioning for mobile */
      position: absolute !important;
      top: 105% !important;
      left: 0 !important;
      right: auto !important;
      bottom: auto !important;
      margin-top: -3rem !important; /* Pull phones up closer to content */

      /* Enable horizontal scrolling */
      display: flex !important;
      overflow-x: auto;
      overflow-y: hidden;
      width: 100vw;
      gap: 1rem;
      padding: 0 1rem;

      /* Smooth scrolling */
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;

      /* Hide scrollbar but keep functionality */
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE/Edge */
    }

    .phones-wrapper::-webkit-scrollbar {
      display: none; /* Chrome/Safari */
    }

    /* Mobile phone containers */
    .phones-wrapper .phone-container {
      /* Reset absolute positioning */
      position: relative !important;
      top: auto !important;
      left: auto !important;
      transform: none !important;

      /* Set consistent size for mobile */
      flex-shrink: 0;
      width: 16rem !important; /* Slightly smaller for mobile */
      height: 28rem !important;

      /* Ensure they're visible */
      opacity: 1 !important;

      /* Reset background size for mobile */
      background-size: cover !important;
      background-position: center !important;
    }

    /* Mobile small phones should be same size as main phone */
    .phones-wrapper .phone-container.phone-small {
      width: 16rem !important;
      height: 28rem !important;
    }

    /* Mobile phone cards adjustment */
    .phones-wrapper .phone-card {
      bottom: 0.75rem !important;
      left: 0.75rem !important;
      right: 0.75rem !important;
      padding: 0.75rem !important;
    }

    /* Mobile statistics adjustments */
    .phones-wrapper .stats-card-front .text-8xl {
      font-size: 4rem !important; /* Smaller on mobile */
    }

    .phones-wrapper .stats-card-front .text-6xl {
      font-size: 3rem !important; /* Smaller on mobile */
    }

    .phones-wrapper .stats-card-front p {
      font-size: 0.875rem !important; /* Smaller text on mobile */
    }


    /* Disable pulse animation on mobile for better performance */
    .phone-container .stats-card-front {
      animation: none !important;
    }
  }
}
/* Testimonials Infinite Carousel */
.testimonials-carousel {
  width: 100%;
  overflow: hidden;
  position: relative;
  mask: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}

.testimonials-track {
  display: flex;
  width: calc(320px * 8); /* 8 cards total (5 original + 3 duplicates) */
  animation: scroll-testimonials 25s linear infinite;
}

.testimonial-card {
  flex-shrink: 0;
  width: 300px;
  margin-right: 20px;
}

@keyframes scroll-testimonials {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-320px * 5)); /* Move by 5 cards (original set) */
  }
}

/* Pause animation on hover */
.testimonials-carousel:hover .testimonials-track {
  animation-play-state: paused;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .testimonials-track {
    width: calc(280px * 8);
    animation: scroll-testimonials-mobile 25s linear infinite;
  }

  .testimonial-card {
    width: 260px;
    margin-right: 20px;
  }

  @keyframes scroll-testimonials-mobile {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-280px * 5));
    }
  }
}

/* Smooth transitions for card content */
.testimonial-card .bg-white {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover .bg-white {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
/* Values Section Styles */

/* Button styles */
.value-btn {
  min-width: 140px;
}

.value-btn.selected {
  background-color: white !important;
  color: black !important;
}

/* Content area with fixed height to prevent layout shifts */
.values-content-area {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Content visibility logic - hide all content by default */
.value-content {
  display: none;
}

/* Show selected content */
.value-content.selected {
  display: block !important;
}
/* Video Section Styles */
.video-section {
  position: relative;
  overflow: hidden;
}

.video-section video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Ensure video covers the entire container */
.video-section video::-webkit-media-controls {
  display: none !important;
}

.video-section video::-webkit-media-controls-panel {
  display: none !important;
}

.video-section video::-webkit-media-controls-play-button {
  display: none !important;
}

.video-section video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

/* Video overlay content */
.video-overlay {
  position: relative;
  z-index: 3;
}

/* Dark overlay for better text readability */
.video-dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 2;
}

/* Fallback background for when video doesn't load */
.video-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a365d 0%, #2d3748 100%);
  z-index: 0;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .video-section {
    height: 300px !important;
  }

  /* On mobile, prioritize performance - use static background if needed */
  .video-section video {
    display: block;
  }
}

/* Reduce video quality on smaller screens for better performance */
@media (max-width: 480px) {
  .video-section video {
    transform: scale(1.1); /* Slight zoom to avoid letterboxing issues */
  }
}
/* Modal Base Styles - Hidden by default */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  padding: 1rem;
}

/* Modal Backdrop */
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 300ms ease-out;
}

/* Modal Content Container */
.modal-content {
  position: relative;
  background: white;
  border-radius: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 28rem;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.95);
  opacity: 0;
  transition: transform 300ms ease-out, opacity 300ms ease-out;
}

/* Open State - When .open class is added */
.modal.open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal.open .modal-backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.modal.open .modal-content {
  transform: scale(1);
  opacity: 1;
}

/* Prevent body scroll when modal is open */
body:has(.modal.open) {
  overflow: hidden;
}
/* Sticky Navigation Bar Styles */
.sticky-nav {
  backdrop-filter: blur(10px);
  background-color: rgba(32, 48, 42, 0.95);
}

.sticky-nav .nav-items {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.sticky-nav .nav-items::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.nav-link {
  flex-shrink: 0;
}

.nav-link:hover {
  transform: translateY(-2px);
}

.nav-link:active {
  transform: translateY(0);
}

/* Active link indicator */
.nav-link.active:not(.nav-link-contact) {
  color: #DCB631;
  position: relative;
}

.nav-link.active:not(.nav-link-contact)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 2px;
  background-color: #DCB631;
}

/* Contact button specific styles */
.nav-link-contact {
  border: none;
  cursor: pointer;
}

.nav-link-contact:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .sticky-nav .h-16 {
    height: 4rem;
  }

  .sticky-nav .nav-items {
    flex: 1;
    justify-content: flex-start;
    padding-left: 0.5rem;
    margin-left: 0.5rem;
  }

  .nav-link {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
  }

  .sticky-nav img {
    height: 2rem;
  }
}

@media (max-width: 768px) {
  .sticky-nav .nav-items {
    gap: 0.25rem;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *










 */

html {
  scroll-behavior: smooth;
}

body, main {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow-x: hidden;
  margin: 0;
}

/* Ensure smooth scrolling behavior is maintained */
body.scroll-blocked {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}

html.scroll-blocked {
  overflow: hidden !important;
}

/* Scroll progress bar */