/* Enhanced Animation and Visual Effects */

:root {
  --primary-red: #e63946;
  --primary-dark: #000000;
  --text-light: #ffffff;
  --text-dark: #333333;
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition-bounce: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-strong: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* ====== Enhanced Reveal Animation Styles ====== */
.reveal-initial {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1), 
              transform 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1), 
              transform 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1), 
              transform 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1), 
              transform 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.revealed {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* Stagger the reveal animations with improved timing */
.reveal-initial:nth-child(1) { transition-delay: 0.1s; }
.reveal-initial:nth-child(2) { transition-delay: 0.2s; }
.reveal-initial:nth-child(3) { transition-delay: 0.3s; }
.reveal-initial:nth-child(4) { transition-delay: 0.4s; }
.reveal-initial:nth-child(5) { transition-delay: 0.5s; }

/* ====== Enhanced Hero Section ====== */
.hero {
  position: relative;
  height: 100vh;
  min-height: 700px;
  display: flex;
  align-items: center;
  color: var(--text-light);
  overflow: hidden;
}

.hero video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  transform-origin: center;
  animation: subtle-zoom 20s infinite alternate ease-in-out;
}

/* Add subtle grain texture overlay for cinematic feel */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAA9qSURBVGhDzVpZjFzVmf7OXeq2VHdX7173vu/dXb2X43bbxnaMbWzAxhhswEDAIRAIQgQJJJJRHsZJZoI0eYAZTaJ5mUnCaEbJaJRkRsooGiUwwmOzGIzNYnu8tNvdr1X3rbqq7nLO/Ldu2YaYMVZsj/SrqlPnnv//v3P+5f+X8hPwkwE5Ojr6F4Zh/K2mafd7S/8f+NDBwcHfT09P/9TzPqKJGsdxvKvwIQBH/ytd14+o+MjJVVHb8ZlisRjkl34SoJjkZBcWFg7k8/lv5HK5Z0Oh0Dc9148YURgMTwI9AfA3SxgZaLO/i1TnU/A1rr/AJe7s7KzMzMw86S19JFhVRkZHRx/gFL+7/dSJh0bXDV/e3dP5Qizg3y8hbfEUP96FV0GBtTEJjdLYeVkO7l+G3/Qu8RHw2bVr10/7+voeGx8f/7O39IFYVUYIQXDqz/aN7D+xs3fnD3Khxs2qL4IgbLzRb5Agcih8C58uVCGPKJ6VbXyNAl1N9c6QpVpzC3tLHwgqEjtz5syXUqnUN3t7e98cHx+f914/P1aVEVJIEDZPG+gbPuHXZbh6mEt8SLRc4A0v6+KvKyhx8TVygVJhXKJCMqnHYxsb5bVJ2MrE0+Ul7/XzY1UZIQ055YdV1Q9b98PRRM6BIgPCAyHwCfBpSZC9WFIkQ1SSJxQuzCWmtlOKxz3dJaE6HyJ6uyuQtqfU4sI77/zDnfCRcq2o08jXTZOrVqeVW3fgS8QoGDZlpEHzEpGCZ4AxB/4GCYbsoYEhb0I2TEn1G0LOu/GVw/OX3/jkxCOPTJ8+Pb9o2f/qvfZcWF1GaAQ6zl50z779UDmkK2WmkocFUZNFXgNcDG+AE1GXhkSJcblSpDLFeKR1p/G8Zf/+xKnHHvv3V/fs2TNNZI9675wbq5taSp67Y1qd3KUqx7ZR8EgpvC54y57DvCE92yvMu6D3mBF4WvP9F/SWr9vxvXON8VdPPHv05S0nxsYGxse/PDY2NnFycvIhz3xurC4jQgUZWzEcx2cLONDVkiwhFFlkxSvMCx4OPQeIAQq9GfQHBjytiZ0x/y9t+dLb8Vj8t7vC4cNToyemzpw5+0fPfA6sbiohO+u1jDlXLc81U5FQQFWkVFh/xU0pqpXIvB0qEwWvN/WQSQu5F5cqjrUQ3TTuOvQvudYeK5fLXfdecjGMzNpI5wPvjC8trQkk64mdaopuHlVkv8mH+lwU7gQBkSbqJU6zCIGLrnWgIJMvN/YNPZJv6fvGHe+rDwqpPKNK+4jnvOh52uXLl9MjIyMZz7s4Vp2RpWSRNJ3/06lEJLrWb1jDhnX95/HSAoPkXeFSUVdGQMZsE28+d/qOVK8vnVqr1a2EG/kWcslzHRZWHDUacZ/0XBefcX7QQRe1h/D7v//14QOmL6qFCitPGzWpVCpZO4tZpFLtpG1VJ12LjNcXpjTXKv/21T/+20hHW18m2mHHgnHSNxBGPC5RsVF7q7y08LS35d25VPVX3lt3Yy9XdTVY6eUHTj1z5NQjI+1t97eGt43EC/GW1ubl5a4nxif+qdCcXLOrdiW1lE/FMvkdyc5eEt+4j1itmwhc+YzatVfR2XmFLC4uvHX16lPfk+TaXwuqvBHXQqFQdGhrq/8pNjcP7dT7YnCJwXfX7KrKGZ9nVNyARjY/+PtDLclIV3fTjlg82UFCOg3pZEcoaA4xpBp8Vl/GbLoiV7xNZASxaGA9IpFWJBNrUMhN3rdpeP/PSTN1J4mKfz1//vzXS6XSAS/8LqxyauG15/7tz/++qHwrLRtVVdIkxxJoYVBKJa2m+YkTdnV7W+/Gxlhzy+Gfz7y7SN86NoEXXz2LV189i8XFMlzXoX7HVDMQaAnC59cRDPqQzxVG9+zYde9CqXQqt7T8xPn6/LcFd+m0Vat4uXgRrCojb7x+NhGD3JVrbIhG9QBhhORwGSwDzsgcYyRJ+KkoaqKNpeXiVGt7x+BgZ3fPkScvXVtGIr4Rd+z6MjrbdqMllUc6NozXTz2Nl06/gE/dt5Ps3taPX73z82+dnn3jIduqN/OVPZV653wpF/Ky8C5WeZ0o5b5j5JbaEgnzIEvIgsM8v/AMQvwU7MuAv0gkGtXSQlHu0Ayf/ORz9uIilomMxx54DNWR+1HKx5GZ3oqOVDda2zoRCDZj8LYNePn1n+Hg1q24u/cgwvlrQT0Y3NRYSEw0J1OMxJevVm4O+YN+L7t3Ywrv8Xk3PfFqIW92NOdN1bCIE0E4uSLZVgFyXuC5ZgQDmXDzlWXaFmtK9Ozy5Q6/eXUM6zcQFLZ+GqLPRP7NZ1HPhFFYasKmnsHbA60Y2fxFpFJtuL8tjWvzr2LnwbvwhdrvwP9pCuXCzC5B2Pq8IOvz3nbvYrUZwfriTCGfL1WnUogCe5JKMjxR5BrhSDGvYUYKiwvXkvHWno4NY53DyYMPnvvjn6bRPfgIdh24D7FYE6qVOpauvomiGIOveSc6tu/H+qFWdG7bgHwBKFeA4IZ7MM2eBBzdSVhLAZ9RlIoLc7IUzXrbvQurWhAcF158fvzkvbt37IwGtQhRHSrKZDbOMIMgFNXhyhQucXwKuTw5tNkJ5nNe9NrPpzG0YwB6aDPM69ew/8G/x9R/fQ8vn3kZ+z71FaggKE6ZeOM8UKhPwDcwguSm9cixnZtjAZ1oHEaupTc4pXJtxhRtxdvuXVjVjPDh0aWrTbFCKT24XonHoG4TFwGEeHcQI0qqEwxFpfL1+Vcy2cZt//z9s//54rML06EE0NLsYe9e9I5sh8IHPDf/GPKK4MWfvou/e/Rv8C87Q3jtpV8g0rkTo9sfhnX1LKr6GDry2xB11xP+ABQMT1m1yozrVpbE34TU4vtgtYtBNJfL/qFpKiioXvhSRBLpSFxhTrn8sDYMoVqu/mI2u3h0YiI2USwUCv3rYXW0ZUBj+TYcxdvTVXSmwri/6Ul8eu4Sjm/bhmPdPXhd30/QuhfHDg/i1XdyiHXtQzQ9jOWFfqRSZiN7w+c4Sj62dKVQKp71tnsX1tTd2RWrZZy4Sn2xwI6EbSL6kKXnFgqoF6uoVWuOXbdmx7PFB9dvtL73xPeyP3uxBL9aI2a1guD1rXjr7T9hX2sMpFjBunyCbN/ShYGNYfT5ryLpVpFq1VHNTkEPdyEciyBrjUEkjmtZVapIZtmyZr+/aVVH/L7GCJfE5UfpYYIJ7QjBp2eQml+AeW0BtesLqOULLCuLTJn20gx9acxI/h//+BSKM1dQD9UQSPCGXVuGP1bGXK2EXdFe9CWbMVnXyPvvnUVnVkUpz34HhkAQDr0OO/AGXCnH8rZwbTaTW7jgbfcu3ByTZBFKpjN7zEQZ5VJdKlZKqOcrLLUqLOaCk2cq9Qo0E3D8wNlT16wTr7+JM2+8jVgbkEjx08OdlRlUZ9Kw7Qk08+3XLWHcmVQwJ87DtS8gHCIo15+Azl6DHopDjWVhVZZQqZZz8/Pz57yt3oObxUjjyiHcn7w6pVWrJnWPFvMcR/JxnbALnGVBVlIg3V1DdixNcnMT4FrWCMuLRd5WQhBMJRqL8l1NiA2OsIx1NKfjsHxBKLF2pNv7EYgqXG4OGjcXUSnPIpcvXOeTLnlbvAc3MbVY8+BxT/7qYkPYQRAJiLJCJUl7zCkH1IUSKOdM1EsWwUqF5lRQ0v081wSYrkjrzLnOyowEpwwENclkspIQkEnHBKLo2DQEf7ILQf7diDJ8/gYk4jPgyvWlLF76vbfFe3BTGGFYAuFPG2TgkuPWVEGlrOmsDQN+ORSMGX5FFOuqj0+sMg36Dd0nmIEgQdCF60ocVoJVtyBKnggIVlGhIiDkYGXUEIm0w7HqVIsOuXJeqhFjeW5u7ufeFu/BTcwIHxVeEdVa/kXd52aIKiWUVZbW5Ue8zRdsaPKbPsIrlWrZzOQra2oMmQihhHuEoxuGrMmi3zAIc0llYaOEvz7aFIlERSpRU3GQmUzKDZrLgNf2LOZtK3VnqzF3xuBf1g1m6e03iRF26JZFZR3btK+zCpQFTqhI0OU4gXhIjMbkYDzoDzcG9XA8qAcT0fBAo7uu6eEGf3MiEurqjKfi7X3hUG9PYzTe3h5MdnWHwm3N/ljC78smoxHdp8mCyuKa5ZaQrMjFcnmumJ9bLhUWXzWUzHeFEPuD5JEbc7MYYYXHnqJXtHJH5prr81Xb5jhHdHwBwRcUxSBbwj6hsDcLuaJQkSwYPJF8LB6FTX8jkm6EDaUe5Kk1yKoK8rkklAYGfTJvzvKOpZqI9FKplrVWs7MvV4q/qlcLF+JucXSu4vzbm5PmY6Uvnqt7Sd2Im8cIT0Io25VsuzQtG/U0W9AUc4SgGCp8IYfIfvhFCYLCG5IkQvfp8DX4YQQ1+CKKLVBZXDXDFXVYN/lDFFIwTRXZnH1xNjN1+crV0bOX3vvjVy9dLfzwnXPiPzSG3YNdEtLfRF3Neh3Vupf0jbjpQxWO0GD7BXYVliPYZMYeQl18ufEVKxTSZeHLQtfhQxCNJH3dPQGj03RQrvlRdrZJQcb2xST3rNUQa3M1/bkzdZw4L2F4s4pTFwM4c1HPHbxXG41GzYhTqCMWo5DLJirz8zVPNrcd3PQZoV9uEcCXhwVhp8PGVS4IQs1sJG4+kwgmrJZeXdSbWvQCDShFhNm4BEXPzpmY52gXmYJ8nvVALIeqW2Dtrzi+oG/+sGYHn8znMpUda8JKJGxAMSy4wTCkSjXrZdYwt85fxygUCg3zcvk5yw79Ql6z+6pEUUQ+lXW5gNJUEpemDHEpG3XmbJVvZdutLDuKbjuSXQ9YRdbwtQDRLQOWaRDN50O2RhVXzUMOarPJAJ3c3ILlJZbcDWXKi+u2pWP06kJm6k6PoIVyudxKP+y5xXx1plotTbiu+VPXrT/PO//FTX5V9NvU8pdFlvKmZf/SH5AODvak+2PxRHdz39p4c1t/Y3NLf0OyuT8SjfWZRrQ/GIr2B0Ox/vUdLf0GmS3PF2vF+Ur5ajZbfTefyfyoVi18mwiyP/Tx6u8L13W7Rb/v4aFDhwb37t07FI1GB9ln7I/H44n29vYEdP9QX98Qy11/JBBYNzMz86q3/X8g//IKg8fJBCHrBMdx1npdEiCQ/wZGt9WS9Rt0mQAAAABJRU5ErkJggg==');
  opacity: 0.03;
  pointer-events: none;
  z-index: 1;
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
  z-index: -1;
}

@keyframes subtle-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-size: clamp(2.5rem, 8vw, 5rem);
  line-height: 1.1;
  margin-bottom: 1.5rem;
  font-weight: 900;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  animation: title-reveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes title-reveal {
  0% {
      opacity: 0;
      transform: translateY(40px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

.hero p {
  font-size: clamp(1rem, 3vw, 1.5rem);
  margin-bottom: 2rem;
  max-width: 600px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  animation: subtitle-reveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
  opacity: 0;
}

@keyframes subtitle-reveal {
  0% {
      opacity: 0;
      transform: translateY(20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

.hero .btn-primary {
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  animation: button-reveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
  opacity: 0;
}

@keyframes button-reveal {
  0% {
      opacity: 0;
      transform: translateY(20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

.hero .btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.hero .btn-primary:active {
  transform: translateY(-1px);
}

/* ====== Enhanced Portfolio Cards ====== */
.project-card {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: var(--shadow-soft);
  transition: var(--transition-spring);
  transform: translateY(0);
  background-color: white;
}

.project-card:hover {
  box-shadow: var(--shadow-strong);
  transform: translateY(-8px);
}

.project-image {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.project-card:hover .project-image img {
  transform: scale(1.08);
}

.project-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.project-card:hover .project-overlay {
  opacity: 1;
}

.project-overlay .btn-outline {
  padding: 10px 24px;
  font-weight: 600;
  letter-spacing: 1px;
  transition: var(--transition-spring);
  transform: translateY(20px);
  opacity: 0;
}

.project-card:hover .project-overlay .btn-outline {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.1s;
}

.project-overlay .btn-outline::after {
  content: " ↗";
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.3s ease;
  transform: translateX(-5px);
  display: inline-block;
}

.project-overlay .btn-outline:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.project-content {
  padding: 1.5rem;
  transform: translateY(0);
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.project-card:hover .project-content {
  transform: translateY(-5px);
}

/* Add a subtle line animation to project cards */
.project-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: var(--primary-red);
  transition: width 0.4s ease;
}

.project-card:hover::after {
  width: 100%;
}

/* ====== Enhanced Service Tabs Enhancement ====== */
.service-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
}

.tab-btn {
  padding: 1rem 2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dark);
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  transition: color 0.3s ease, transform 0.2s ease;
  overflow: hidden;
}

.tab-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: var(--primary-red);
  transition: width 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tab-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(230, 57, 70, 0.05);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}

.tab-btn:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.tab-btn:hover::after,
.tab-btn.active::after {
  width: 100%;
}

.tab-btn:hover {
  color: var(--primary-red);
  transform: translateY(-2px);
}

.tab-btn.active {
  color: var(--primary-red);
}

.tab-content {
  display: none;
  animation: fadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ====== Enhanced Stats Counter Section ====== */
.stats-section {
  background-color: var(--primary-dark);
  color: var(--text-light);
  padding: 5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Add a subtle animated texture overlay */
.stats-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjMjIyIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDVMNSAwWk02IDRMNCA2Wk0tMSAxTDEgLTFaIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgo8L3N2Zz4=');
  opacity: 0.05;
  z-index: 0;
  animation: textureMove 20s linear infinite;
}

@keyframes textureMove {
  0% { background-position: 0 0; }
  100% { background-position: 50px 50px; }
}

.stats-grid {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.stat-item {
  padding: 2rem;
  flex: 1;
  min-width: 200px;
  position: relative;
}

.counter {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  color: var(--primary-red);
  position: relative;
  display: inline-block;
}

/* Add animated flare to counter */
.counter::after {
  content: '+';
  position: absolute;
  right: -15px;
  top: 0;
  font-size: 2.5rem;
  opacity: 0.8;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.stat-label {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
}

/* Add divider between stats */
.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 60%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent);
}

/* ====== Enhanced Testimonial Carousel ====== */
.testimonial {
  padding: 2.5rem;
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
  backdrop-filter: blur(10px);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: var(--transition-spring);
  position: relative;
  overflow: hidden;
}

.testimonial:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-strong);
}

/* Add floating dots background */
.testimonial::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, rgba(230, 57, 70, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.2;
  z-index: 0;
  pointer-events: none;
}

.quote-icon {
  color: var(--primary-red);
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  opacity: 0.8;
  position: relative;
  z-index: 1;
}

blockquote {
  font-style: italic;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  line-height: 1.7;
  position: relative;
  z-index: 1;
}

.testimonial-author {
  position: relative;
  z-index: 1;
}

.testimonial-author h4 {
  color: var(--primary-red);
  margin-bottom: 0.25rem;
  font-weight: 700;
}

.testimonial-author p {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Add subtle border animation */
.testimonial::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background-color: var(--primary-red);
  transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.testimonial:hover::after {
  height: 100%;
}

/* ====== Enhanced Contact Form ====== */
.contact-form {
  background-color: white;
  padding: 2.5rem;
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.contact-form:hover {
  box-shadow: var(--shadow-strong);
}

/* Add subtle background pattern */
.contact-form::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23e63946' fill-opacity='0.03' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 5v1H5V0zm1 5v1H5v-1h1z'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.5;
  pointer-events: none;
}

.form-control {
  width: 100%;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  transition: var(--transition-smooth);
  position: relative;
  background-color: rgba(255, 255, 255, 0.9);
}

.form-control:focus {
  outline: none;
  border-color: var(--primary-red);
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.2);
  background-color: white;
}

.contact-form .btn-primary {
  width: 100%;
  padding: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}

/* Add ripple effect to submit button */
.contact-form .btn-primary::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%, -50%);
  transform-origin: 50% 50%;
}

.contact-form .btn-primary:hover::after {
  animation: ripple 1s ease-out;
}

@keyframes ripple {
  0% {
      transform: scale(0, 0);
      opacity: 0.5;
  }
  20% {
      transform: scale(25, 25);
      opacity: 0.3;
  }
  100% {
      opacity: 0;
      transform: scale(40, 40);
  }
}

/* Success toast notification */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #10b981;
  color: white;
  padding: 1rem 2rem;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  transform: translateY(100px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* Add toast close animation */
.toast.hide {
  transform: translateX(100%);
  opacity: 0;
}

/* ====== Floating Menu Button Enhancements ====== */
.floating-menu-btn {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
              box-shadow 0.3s ease, 
              background-color 0.3s ease;
}

.floating-menu-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}

/* Add pulse animation */
@keyframes pulse-attention {
  0% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(230, 57, 70, 0); }
  100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0); }
}

.floating-menu-btn.pulse {
  animation: pulse-attention 2s infinite;
}

/* Overlay menu link flash effect */
.overlay-link.flash {
  animation: flash 0.5s;
}

@keyframes flash {
  0% { color: white; }
  50% { color: var(--primary-red); }
  100% { color: white; }
}

/* ====== Reduced Motion Support ====== */
@media (prefers-reduced-motion: reduce) {
  .reveal-initial,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .revealed {
      transition: none !important;
      transform: none !important;
      opacity: 1 !important;
  }
  
  .project-image img,
  .project-overlay,
  .project-card,
  .testimonial,
  .tab-btn::before,
  .tab-btn::after {
      transition: none !important;
      transform: none !important;
  }
  
  .hero h1, .hero p, .hero .btn-primary {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
  }
  
  .hero video {
      animation: none !important;
  }
  
  .tab-content {
      animation: none !important;
  }
  
  .stat-item::after {
      animation: none !important;
  }
  
  * {
      transition-duration: 0.001ms !important;
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
  }
}

/* ====== Responsive Adjustments ====== */
@media (max-width: 768px) {
  .stats-grid {
      flex-direction: column;
  }
  
  .stat-item {
      padding: 1.5rem;
  }
  
  .counter {
      font-size: 2.5rem;
  }
  
  .service-tabs {
      flex-wrap: wrap;
  }
  
  .tab-btn {
      padding: 0.75rem 1rem;
      flex: 1 0 auto;
  }
  
  .stat-item:not(:last-child)::after {
      display: none;
  }
}

@media (max-width: 480px) {
  .hero h1 {
      font-size: 2.5rem;
  }
  
  .hero p {
      font-size: 1rem;
  }
  
  .contact-form {
      padding: 1.5rem;
  }
  
  .testimonial {
      padding: 1.5rem;
  }
}

/* Page transition effects */
.page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary-dark);
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.page-transition-overlay.active {
  transform: translateY(0%);
}

.page-transition-overlay.exit {
  transform: translateY(-100%);
}