* {

  margin: 0px;

  padding: 0px;

  box-sizing: border-box;

}

:root {

  --bg-color: #333333;

  --text-color: #ffffff;

  --hero-gradient: linear-gradient(135deg, #333333, #183a49);



  --navbar-bg: rgba(51, 51, 51, 0.8);

  --btn-bg: #007e34;

  --btn-bg-hover: #05d15ac2;

  --cta-bg: #007e34;

  --cta-bg-hover:#05d15ac2; 

}



body,

html {

  height: 100%;

  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  background-color: var(--bg-color);

  color: var(--text-color);

  scroll-behavior: smooth;

  margin: 0;

  padding: 0;

  transition: background-color 0.5s ease, color 0.5s ease;

}

body {

  font-family: "Poppins", Arial, sans-serif;

}

h1,

.navbar-brand,

.section-title {

  font-family: "Space Grotesk", Arial, sans-serif;

  letter-spacing: 0.5px;

  font-size: 2.5rem;

}

.hero-section {

  background: var(--hero-gradient);

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background 0.5s ease;

  overflow: hidden;

  padding-top: 100px;

  padding-bottom: 40px;

}



.hero-section i {

  transition: transform 0.3s ease;

}



.hero-content {

  animation: fadeInUp 1s ease-out both;

  animation-delay: 0.3s;

}



.hero-image-wrapper {

  position: relative; 

}

.hero-image-backdrop {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 90%; 

  height: 90%; 

  background: radial-gradient(circle at center, rgba(5, 209, 90, 0.1), transparent 70%);

  filter: blur(50px); 

  transform: translate(-50%, -50%) scale(1.1); 

  z-index: -1;

  pointer-events: none;

  animation: pulseGlow 4s ease-in-out infinite alternate; 

}

@keyframes pulseGlow {

  0% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; }

  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }

}

.btn

{

  border-radius: 50px;

}

.hero-cta {

  font-size: 1.125rem; 

  padding: 0.9rem 2rem;

  border-radius: 50px;

  font-weight: 600;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.4rem;

  position: relative;

  overflow: hidden;

  z-index: 1;

  transition: background-color 0.3s ease, transform 0.2s ease;

}



.hero-cta-primary {

  background-color: var(--cta-bg);

  color: #fff;

  border: none;

}



.hero-cta-secondary {

  background-color: transparent;

  border: 2px solid #fff;

  color: #fff;

}



@media (hover: hover) and (pointer: fine) {

  .hero-cta-primary:hover {

    background-color: var(--cta-bg-hover);

  }

  .hero-cta-secondary:hover {

    background-color: rgba(255, 255, 255, 0.1);

  }

  .hero-cta .btn-icon {

    transition: transform 0.3s ease;

  }

  .hero-cta:hover .btn-icon {

    transform: translateX(5px);

  }

}



@media (max-width: 576px) {

  .hero-cta {

    width: 100%;

    font-size: 1rem;

    padding: 1rem;

  }

}



.floating-elements {

  position: absolute; 

  width: 100%;

  height: 100%;

  pointer-events: none;

  

}



.floating-icon {

  position: absolute;

  font-size: 3rem; 

  color: var(--icon-color, var(--btn-bg)); 

  opacity: 0.8;

  animation: float var(--float-speed, 3s) ease-in-out infinite; 

  animation-delay: var(--delay);

  transition: transform 0.3s ease, color 0.3s ease; 

  text-shadow: 0 0 10px rgba(5, 209, 90, 0.4); 

  will-change: transform;

}



.floating-icon:nth-child(1) { top: 20%; left: 0%; font-size: 3.2rem; }

.floating-icon:nth-child(2) { top: 40%; right: 10%; font-size: 2.8rem; }

.floating-icon:nth-child(3) { bottom: 30%; left: 2%; font-size: 3.5rem; }

.floating-icon:nth-child(4) { top: 10%; right: 25%; font-size: 2.5rem; } 

.floating-icon-large { font-size: 3.5rem; }

.floating-icon-medium { font-size: 2.8rem; }

.floating-icon-small { font-size: 2.2rem; }



@keyframes float {

  0% { transform: translateY(0px) rotate(0deg); }

  50% { transform: translateY(var(--float-dist, -20px)) rotate(var(--rotate-deg, 3deg)); } 

  100% { transform: translateY(0px) rotate(0deg); }

}





.hero-image {

  transform: translateY(var(--parallax-offset, 0px)); 

  transition: transform 0.1s ease-out; 

  will-change: transform;

  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.25)); 

}

@media (hover:hover) and (pointer:fine){

  .hero-image:hover{

    transform: translateY(var(--parallax-offset, 0px)) scale(1.02) !important; 

  }

}





.hero-headline-container h1 span {

  display: inline-block; 

}

.hero-headline-container p span {

  display: inline-block;

}



@keyframes fadeInUp {

  0% {

    opacity: 0;

    transform: translateY(20px);

  }

  100% {

    opacity: 1;

    transform: translateY(0);

  }

}



.navbar {

  background-color: var(--navbar-bg);

  transition: background-color 0.5s ease, box-shadow 0.3s ease;

  backdrop-filter: blur(10px);

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  transform: translateZ(0);

  will-change: box-shadow, background-color;

}



.navbar.scrolled {

  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;

}



.navbar-brand {

  font-size: 1.5rem;

  font-weight: 800;

  letter-spacing: 1.5px;

  color: var(--btn-bg);

  text-transform: uppercase;

  position: relative;

  display: inline-block;

  transition: all 0.4s ease;

  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);

}



.navbar-brand::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -4px;

  height: 3px;

  width: 0%;

  background-color: var(--btn-bg);

  transition: width 0.3s ease;

}



@media (hover: hover) and (pointer: fine) {

  .navbar-brand:hover {

    transform: scale(1.08);

    letter-spacing: 2px;

    color: var(--btn-bg-hover);

  }



  .navbar-brand:hover::after {

    width: 100%;

  }

}



.nav-link {

  position: relative;

  transition: color 0.2s, transform 0.3s;

  padding-bottom: 5px;

  color: var(--text-color) !important;

}



.nav-link:hover {

  transform: translateY(-2px);

  color: var(--text-color) !important;

}



.nav-link.active {

  font-weight: bold;

  color: var(--btn-bg-hover) !important;

}



.navbar-light .navbar-nav .nav-link {

  color: var(--text-color) !important;

}

.navbar-light .navbar-nav .nav-link.active {

  color: var(--btn-bg-hover) !important;

}



.nav-link .nav-underline {

  position: absolute;

  bottom: 0;

  left: 0;

  height: 2px;

  width: 0;

  background: var(--btn-bg);

  transition: width 0.1s ease;

  color: var(--text-color);

}



.btn-primary-custom {

  background-color: var(--cta-bg);

  color: #fff;

  border: none;

  transition: background-color 0.3s;

  position: relative;

  overflow: hidden;

  z-index: 1;

}



.btn-primary-custom::before {

  content: "";

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: rgba(255, 255, 255, 0.2);

  transform: skewX(-15deg);

  transition: 0.5s;

  z-index: -1;

}



.btn-icon {

  transition: transform 0.3s ease;

}



@media (hover: hover) and (pointer: fine) {

  .btn-primary-custom:hover {

    background-color: var(--cta-bg-hover);

  }

  .btn-primary-custom:hover::before {

    left: 100%;

  }

  .btn-primary-custom:hover .btn-icon {

    transform: translateX(5px);

  }

}

.navbar-brand:focus,

.navbar-brand:active,

.navbar-brand:visited {

  color: var(--btn-bg);

  outline: none;

  text-decoration: none;

}

.navbar-separator {

  position: relative;

  height: 70px;

  overflow: hidden;

  line-height: 0;

}



.navbar-separator svg {

  position: absolute;

  bottom: 0;

  width: 100%;

  height: 70px;

}



.navbar-separator svg path {

  fill: var(--bg-color);

  transition: fill 0.5s ease;

}



.footer {

  background-color: var(--navbar-bg);

  color: var(--text-color);

  transition: background-color 0.5s ease, color 0.5s ease;

}

.footer::before {

  background-color: var(--navbar-bg);

}



.footer a.footer-link {

  color: var(--text-color);

  text-decoration: none;

  transition: color 0.3s ease;

}



.footer a.footer-icon {

  display: inline-block;

  font-size: 1.25rem;

  color: var(--text-color);

  transition: transform 0.3s ease, color 0.3s ease;

}



@media (hover: hover) and (pointer: fine) {

  .link:hover::after {

    width: 100%;

    left: 0;

  }



  .link:hover {

    color: var(--btn-bg);

    border-bottom: 1px solid transparent;

  }

  .footer a.footer-link:hover {

    color: var(--btn-bg);

  }

  .footer a.footer-icon:hover {

    transform: scale(1.15);

    color: var(--btn-bg);

  }

}

.company-link {

  color: inherit;

  text-decoration: none;

  display: inline-block;

  transition: transform 0.3s ease, color 0.3s ease;

}



.link {

  position: relative;

  display: inline-block;

  text-decoration: none;

  color: inherit;

  cursor: pointer;

  border-bottom: 1px solid rgba(0, 0, 0, 0.2);

  transition: color 0.3s ease;

  color: var(--text-color) !important;

}



.link::after {

  content: "";

  position: absolute;

  width: 0;

  height: 1px;

  bottom: -2px;

  left: 50%;

  background: var(--btn-bg);

  transition: width 0.3s ease, left 0.3s ease;

}



.animate-text {

  opacity: 0;

  transform: translateY(20px);

  animation: fadeInUp 0.8s ease forwards;

}



.animate-text-delay {

  opacity: 0;

  transform: translateY(20px);

  animation: fadeInUp 0.8s ease forwards 0.3s;

}



.animate-button {

  opacity: 0;

  animation: fadeInUp 0.8s ease forwards 0.6s;

}



.animate-image {

  opacity: 0;

  transform: translateX(20px);

  animation: fadeInRight 1s ease forwards 0.3s;

}



.hero-image {

  max-width: 100%;

  height: auto;

  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));

  transition: transform 0.3s ease;

}



.floating-elements {

  position: absolute;

  width: 100%;

  height: 100%;

  pointer-events: none;

}



.floating-icon {

  position: absolute;

  font-size: 3rem;

  color: var(--btn-bg);

  opacity: 0.8;

  animation: float 3s ease-in-out infinite;

  animation-delay: var(--delay);

}



.floating-icon:nth-child(1) {

  top: 20%;

  left: 0;

}

.floating-icon:nth-child(2) {

  top: 40%;

  right: 10%;

}

.floating-icon:nth-child(3) {

  bottom: 30%;

  left: 2%;

}



@keyframes float {

  0% {

    transform: translateY(0px);

  }

  50% {

    transform: translateY(-20px);

  }

  100% {

    transform: translateY(0px);

  }

}



@keyframes fadeInRight {

  0% {

    opacity: 0;

    transform: translateX(20px);

  }

  100% {

    opacity: 1;

    transform: translateX(0);

  }

}



@keyframes slideInLeft {

  from {

    opacity: 0;

    transform: translateX(-30px);

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



@keyframes slideInRight {

  from {

    opacity: 0;

    transform: translateX(30px);

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



.feature-item {

  opacity: 0;

  animation-duration: 0.6s;

  animation-fill-mode: forwards;

  animation-timing-function: ease;

}



.slide-left {

  animation-name: slideInLeft;

}



.slide-right {

  animation-name: slideInRight;

}



.delay-0 {

  animation-delay: 0.2s;

}

.delay-1 {

  animation-delay: 0.4s;

}

.delay-2 {

  animation-delay: 0.6s;

}

.delay-3 {

  animation-delay: 0.8s;

}



@media (hover: hover) and (pointer: fine) {

  .service-card:hover {

    transform: translateY(-12px);

    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;

  }

}

.section-title,

.experience-title {

  background: linear-gradient(45deg, var(--btn-bg), var(--btn-bg-hover));

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  margin-bottom: 0.5rem;

}

.services-section {

  background: linear-gradient(135deg, #232526 0%, #0f2027 100%);

  color: var(--text-color);

  padding: 60px 0 60px 0;

  min-height: 100vh;

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;

}

.services-section {

  background: linear-gradient(135deg, #232526 0%, #0f2027 100%) !important;

}



.services-section .section-title {

  margin-bottom: 0.8rem;

  letter-spacing: 1px;

  background: linear-gradient(45deg, var(--btn-bg), var(--btn-bg-hover));

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

}







.services-section .row {

  margin-top: 2.2rem;

  z-index: 2;

  position: relative;

}



.service-card {

  background: rgba(38, 50, 56, 0.45);

  border-radius: 1.2rem;

  box-shadow: 0 8px 36px 0 rgba(0, 0, 0, 0.17);

  border: 1.5px solid rgba(255, 255, 255, 0.08);

  overflow: hidden;

  min-height: 340px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  padding: 2.1rem 1.1rem 1.2rem 1.1rem;

  transition: transform 0.32s cubic-bezier(0.4, 2, 0.3, 1), box-shadow 0.22s,

    border-color 0.24s;

}



@media (hover: hover) and (pointer: fine) {

  .service-card:hover {

    transform: translateY(-8px) scale(1.037);

    box-shadow: 0 16px 44px rgba(5, 209, 90, 0.16),

      0 2px 18px rgba(0, 0, 0, 0.14);

    border-color: #05d15acc;

  }

  .service-card:hover .icon-wrapper {

    transform: scale(1.13) rotate(3deg);

    box-shadow: 0 4px 18px 0 rgba(5, 209, 90, 0.15),

      0 0 0 8px rgba(5, 209, 90, 0.08);

  }

}



.service-card .icon-wrapper {

  width: 72px;

  height: 72px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--btn-bg), var(--btn-bg-hover));

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 1.1rem auto;

  box-shadow: 0 4px 14px 0 rgba(5, 209, 90, 0.14);

  position: relative;

  transition: box-shadow 0.32s, transform 0.27s;

}



.service-icon {

  font-size: 2rem;

  color: #fff;

}



.service-card .card-title {

  color: var(--btn-bg);

  font-size: 1.19rem;

  font-weight: 700;

  margin-bottom: 0.7rem;

  letter-spacing: 0.3px;

  background: linear-gradient(90deg, var(--btn-bg), var(--btn-bg-hover));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.service-card .card-text {

  color: #e0e0e0;

  font-size: 1.04rem;

  opacity: 0.94;

  margin-bottom: 0;

  line-height: 1.7;

}



@media (max-width: 991px) {

  .services-section .row {

    gap: 1.5rem 0;

  }

  .service-card {

    min-height: 0;

    margin-bottom: 1.3rem;

    padding: 1.3rem 0.6rem 1rem 0.7rem;

  }

  .service-card .icon-wrapper {

    width: 54px;

    height: 54px;

    margin-bottom: 0.7rem;

  }

  .service-icon {

    font-size: 1.35rem;

  }

}



@media (max-width: 700px) {

  .services-section {

    padding: 30px 0 28px 0;

    min-height: unset;

  }

  .service-card {

    border-radius: 1rem;

    margin-bottom: 1.1rem;

    padding: 1.1rem 0.6rem 0.8rem 0.6rem;

  }

}



@media (hover: none) and (pointer: coarse) {

  .service-card,

  .service-card .icon-wrapper {

    transition: none !important;

    box-shadow: 0 3px 16px rgba(5, 209, 90, 0.08) !important;

    border-color: rgba(255, 255, 255, 0.1) !important;

    transform: none !important;

  }

}



.portfolio-section {

  background: linear-gradient(135deg, #232526 0%, #0f2027 100%);

  color: var(--text-color);

  padding: 60px 0 60px 0;

  position: relative;

  overflow: hidden;

}



.portfolio-section .section-title {

  margin-bottom: 0.8rem;

  letter-spacing: 1px;

}







.portfolio-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));

  gap: 2.4rem;

}



.portfolio-card {

  background: rgba(38, 50, 56, 0.45);

  border-radius: 1.2rem;

  box-shadow: 0 8px 36px 0 rgba(0, 0, 0, 0.17);

  border: 1.5px solid rgba(255, 255, 255, 0.08);

  overflow: hidden;

  position: relative;

  transition: transform 0.35s cubic-bezier(0.4, 2, 0.3, 1), box-shadow 0.25s,

    border-color 0.3s;

  min-height: 410px;

  display: flex;

  flex-direction: column;

}



.portfolio-card img {

  object-fit: cover;

  height: 200px;

  width: 100%;

  transition: transform 0.36s cubic-bezier(0.46, 1.45, 0.64, 1);

}



@media (hover: hover) and (pointer: fine) {

  .portfolio-card:hover {

    transform: translateY(-9px) scale(1.04);

    box-shadow: 0 16px 40px rgba(5, 209, 90, 0.15),

      0 2px 18px rgba(0, 0, 0, 0.14);

    border-color: #05d15acc;

  }

}



@media (hover: hover) and (pointer: fine) {

  .portfolio-card:hover img {

    transform: scale(1.08);

    filter: brightness(1.1) blur(0.3px);

  }

}



.portfolio-card .portfolio-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(

    134deg,

    rgba(0, 139, 58, 0.15),

    rgba(40, 40, 40, 0.93) 70%

  );

  color: #fff;

  opacity: 0;

  transition: opacity 0.4s;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  align-items: flex-start;

  padding: 2.3rem 1.5rem 1.3rem 1.5rem;

  z-index: 4;

  pointer-events: none;

}



@media (hover: hover) and (pointer: fine) {

  .portfolio-card:hover .portfolio-overlay,

  .portfolio-card:focus-within .portfolio-overlay {

    opacity: 1;

    pointer-events: auto;

  }

}



.portfolio-overlay .card-title {

  font-size: 1.4rem;

  font-weight: 700;

  margin-bottom: 0.4rem;

}



.portfolio-overlay .card-text {

  font-size: 1.02rem;

  margin-bottom: 1.1rem;

  opacity: 0.88;

}



.portfolio-overlay .btn {

  color: #fff;

  font-weight: 600;

  border-radius: 50px;

  padding: 0.5rem 1.3rem;

  font-size: 1rem;

  transition: background 0.3s;

  border: none;

}

.btn{

  color: #fff;

  font-weight: 600;

  padding: 0.9rem 2.3rem;

  transition: background 0.3s;



}





.portfolio-card .portfolio-badge {

  position: absolute;

  top: 16px;

  left: 16px;

  background: rgba(5, 209, 90, 0.82);

  color: #fff;

  padding: 4px 15px;

  font-size: 0.95rem;

  border-radius: 8px;

  font-weight: 600;

  z-index: 5;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.09);

  letter-spacing: 0.4px;

}

.portfolio-card .img-wrapper {

  width: 100%;

  aspect-ratio: 3/2;

  background-color: #2c2f33;

  display: block;

  border-bottom-left-radius: 1.2rem;

  border-bottom-right-radius: 1.2rem;

}

.portfolio-card .img-wrapper img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

@media (max-width: 700px) {

  .portfolio-grid {

    grid-template-columns: 1fr;

    gap: 1.3rem;

  }

  .portfolio-section {

    padding: 36px 0 36px 0;

  }

  .portfolio-card {

    min-height: 370px;

  }

  .portfolio-card img {

    height: 170px;

  }

  .portfolio-card .portfolio-overlay {

    padding: 1.5rem 0.8rem 1rem 0.8rem;

  }

  .portfolio-card {

    display: block;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);

  }

  .portfolio-card .img-wrapper {

    margin-bottom: 1rem;

  }

  .portfolio-overlay {

    position: static;

    background: transparent;

    opacity: 1;

    pointer-events: auto;

    padding: 0 1rem 1rem;

  }

}

@media (hover: none) and (pointer: coarse) {

  .portfolio-card {

    flex-direction: column;

    justify-content: flex-start;

  }



  .portfolio-card img {

    height: auto;

  }



  .portfolio-card .portfolio-overlay {

    position: relative;

    inset: auto;

    background: rgba(38, 50, 56, 0.85);

    opacity: 1 !important;

    pointer-events: auto;

    padding: 1rem;

    transform: none;

    transition: none;

  }



  @media (hover: hover) and (pointer: fine) {

    .portfolio-card:hover,

    .portfolio-card:hover img {

      transform: none;

      box-shadow: none;

    }

  }

}



.pricing-section {

  background: linear-gradient(135deg, #232526 0%, #0f2027 100%);

  color: var(--text-color);

  position: relative;

  padding: 70px 0 70px 0;

  overflow: hidden;

  z-index: 1;

}



.pricing-section .section-title {

  background: linear-gradient(45deg, var(--btn-bg), var(--btn-bg-hover));

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

}



.pricing-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(305px, 1fr));

  gap: 2.7rem;

  align-items: stretch;

}



.pricing-card.glass-card {

  position: relative;

  background: rgba(38, 50, 56, 0.56);

  border-radius: 1.4rem;

  box-shadow: 0 8px 44px 0 rgba(0, 0, 0, 0.19);

  border: 2px solid rgba(5, 209, 90, 0.09);

  overflow: hidden;

  text-align: center;

  padding: 2.5rem 2rem 2.2rem 2rem;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  transition: transform 0.15s cubic-bezier(0.4, 2, 0.3, 1), box-shadow 0.22s,

    border-color 0.28s;

  z-index: 2;

}



.pricing-card-wrapper {

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

  position: relative;

  min-width: 0;

  height: 100%;

}



.pricing-card-wrapper .pricing-card {

  width: 100%;

  transition: transform 0.15s cubic-bezier(0.4, 2, 0.3, 1), box-shadow 0.22s,

    border-color 0.28s;

}



.pricing-card {

  position: relative;

}

.pricing-card-wrapper .badge-best {

  position: absolute;

  top: -18px;

  left: 50%;

  transform: translateX(-50%);

  background: linear-gradient(90deg, var(--btn-bg), var(--btn-bg-hover));

  color: #fff;

  font-size: 1rem;

  font-weight: 700;

  padding: 7px 24px;

  border-radius: 28px;

  box-shadow: 0 3px 18px rgba(5, 209, 90, 0.13), 0 1.5px 8px rgba(0, 0, 0, 0.12);

  letter-spacing: 0.7px;

  z-index: 10;

  border: 1.5px solid rgba(255, 255, 255, 0.13);

  opacity: 0.96;

  pointer-events: none;

  transition: top 0.35s cubic-bezier(0.4, 2, 0.3, 1);

}



@media (hover: hover) and (pointer: fine) {

  .pricing-card.glass-card:hover {

    transform: translateY(-14px) scale(1.045);

    box-shadow: 0 18px 60px rgba(5, 209, 90, 0.13),

      0 4px 30px rgba(0, 0, 0, 0.17);

    border-color: #05d15acc;

  }

  .pricing-card-wrapper:hover .badge-best {

    top: -32px;

    transition: top 0.35s cubic-bezier(0.4, 2, 0.3, 1);

  }

}



.pricing-card h3 {

  font-size: 1.5rem;

  margin-bottom: 0.7rem;

  background: linear-gradient(90deg, var(--btn-bg), var(--btn-bg-hover));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  font-weight: 800;

  letter-spacing: 0.6px;

}



.pricing-card .price {

  font-size: 2.35rem;

  font-weight: 800;

  margin-bottom: 1.2rem;

  letter-spacing: 0.6px;

  color: var(--btn-bg);

  background: linear-gradient(92deg, #05d15a 55%, #008b3a 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.pricing-card ul {

  list-style: none;

  padding: 0;

  margin: 1.3rem 0 0.8rem 0;

}



.pricing-card ul li {

  margin-bottom: 0.82rem;

  display: flex;

  align-items: center;

  color: #e2e2e2;

  font-size: 1.07rem;

  gap: 0.7em;

  justify-content: center;

}



.pricing-card ul li i {

  color: var(--btn-bg);

  font-size: 1.1em;

}



.pricing-card .btn {

  margin-top: auto;

  padding: 0.8rem 2.1rem;

  font-size: 1.12rem;

  border-radius: 36px;

}



.pricing-card.featured {

  border: 2.7px solid var(--btn-bg-hover);

  box-shadow: 0 16px 64px 0 rgba(5, 209, 90, 0.21),

    0 8px 40px rgba(0, 0, 0, 0.21);

  z-index: 4;

  background: rgba(38, 50, 56, 0.69);

  transform: scale(1.055);

  padding-top: 3.3rem;

}



.pricing-card.featured .price {

  font-size: 2.6rem;

  color: #05d15a;

  background: linear-gradient(90deg, #05d15a 20%, #ffe75e 80%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



@media (hover: none) and (pointer: coarse), (max-width: 700px) {

  .pricing-card-wrapper .badge-best {

    top: -32px !important;

    transition: none !important;

  }

}

/* 🎄 Vánoční akce badge */

.badge-xmas {

  position: absolute;

  top: -18px;

  left: 50%;

  transform: translateX(-50%);

  background: linear-gradient(90deg, #b71c1c, #d32f2f, #ff5252);

  color: #fff;

  font-size: 1rem;

  font-weight: 700;

  padding: 7px 24px;

  border-radius: 28px;

  box-shadow: 0 3px 18px rgba(255, 82, 82, 0.25), 0 1.5px 8px rgba(0, 0, 0, 0.18);

  letter-spacing: 0.7px;

  z-index: 10;

  border: 1.5px solid rgba(255, 255, 255, 0.12);

  opacity: 0.98;

  pointer-events: none;

  text-shadow: 0 0 6px rgba(255, 255, 255, 0.25);

  transition: top 0.35s cubic-bezier(0.4, 2, 0.3, 1);

}



.badge-xmas i {

  color: #fff8e1;

}



@media (hover: hover) and (pointer: fine) {

  .pricing-card:hover .badge-xmas {

    top: -32px;

    transition: top 0.35s cubic-bezier(0.4, 2, 0.3, 1);

  }

}



/* 🎄 Fix pro Vánoční akci */



/* Badge – posun, viditelnost mimo kartu */

.pricing-card.xmas {

  overflow: visible !important;

  position: relative;

}



/* Badge Vánoční akce */

.badge-xmas {

  position: absolute;

  top: -25px;

  left: 50%;

  transform: translateX(-50%);

  background: linear-gradient(90deg, #b71c1c, #e53935, #ff7043);

  color: #fff;

  font-size: 1rem;

  font-weight: 700;

  padding: 7px 24px;

  border-radius: 28px;

  box-shadow: 0 3px 18px rgba(255, 82, 82, 0.3),

              0 1.5px 8px rgba(0, 0, 0, 0.2);

  letter-spacing: 0.7px;

  z-index: 20;

  border: 1.5px solid rgba(255, 255, 255, 0.15);

  opacity: 0.98;

  text-shadow: 0 0 6px rgba(255, 255, 255, 0.25);

  pointer-events: none;

  transition: all 0.35s ease;

}



.badge-xmas i {

  color: #fff8e1;

}



/* Efekt hoveru */

@media (hover: hover) and (pointer: fine) {

  .pricing-card.xmas:hover .badge-xmas {

    top: -38px;

    transform: translateX(-50%) scale(1.05);

    box-shadow: 0 4px 25px rgba(255, 204, 128, 0.4);

  }

}



/* Vánoční karta glow efekt */

.pricing-card.xmas {

  border: 2px solid rgba(255, 82, 82, 0.25);

  background: radial-gradient(circle at top, rgba(255, 82, 82, 0.08), rgba(38, 50, 56, 0.6));

  box-shadow: 0 0 25px rgba(255, 82, 82, 0.15),

              0 0 50px rgba(5, 209, 90, 0.08);

}



/* Nadpis – zlatý gradient */

.pricing-card.xmas h3 {

  background: linear-gradient(90deg, #ff5252, #ffca28);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



/* Cena – oprava line-through */

.pricing-card.xmas .price {

  display: flex;

  align-items: baseline;

  justify-content: center;

  gap: 8px;

  margin-bottom: 1.2rem;

  line-height: 1.2;

  -webkit-text-fill-color: white !important;

}



/* Starší cena – šedá a čitelná */

.pricing-card.xmas .price span:first-child {

  color: #b0b0b0 !important;

  font-size: 1.2rem;

  font-weight: 500;

  position: relative;

  text-decoration: none;

}



/* 🎯 výraznější přeškrtnutí staré ceny */

.pricing-card.xmas .price span:first-child::after {

  content: "";

  position: absolute;

  left: -3%;

  right: -3%;

  top: 52%;

  height: 3px;

  background: linear-gradient(90deg, #ff3b3b, #ffca28 50%, #ff3b3b);

  transform: translateY(-50%) rotate(-2deg);

  opacity: 1;

  border-radius: 2px;

  box-shadow: 0 0 6px rgba(255, 82, 82, 0.6), 0 0 10px rgba(255, 204, 40, 0.4);

}





/* Nová cena – gradientový text */

.pricing-card.xmas .price span:last-child {

  font-size: 2.3rem;

  font-weight: 800;

  background: linear-gradient(90deg, #05d15a 10%, #aeea00 60%, #ffca28 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

  letter-spacing: 0.5px;

}





/* Hover efekt – záře a zvýraznění */

@media (hover: hover) and (pointer: fine) {

  .pricing-card.xmas:hover {

    transform: translateY(-14px) scale(1.05);

    border-color: rgba(255, 204, 128, 0.5);

    box-shadow: 0 18px 60px rgba(255, 82, 82, 0.22),

                0 4px 30px rgba(0, 0, 0, 0.3);

  }

}

/* 🕒 Info text pod ceníkem */

.pricing-section .promo-note {

  margin-top: 3rem;

  text-align: center;

  color: #d0d0d0;

  font-size: 0.95rem;

  letter-spacing: 0.3px;

  opacity: 0.9;

  position: relative;

  z-index: 2;

}



.pricing-section .promo-note i {

  color: var(--btn-bg);

  margin-right: 6px;

  font-size: 1.05rem;

  vertical-align: middle;

  transition: color 0.3s ease, transform 0.3s ease;

}



@media (hover: hover) and (pointer: fine) {

  .pricing-section .promo-note:hover i {

    color: var(--btn-bg-hover);

    transform: scale(1.1) rotate(5deg);

  }

}



/* Oddělovací linka nad textem */

.pricing-section .promo-note::before {

  content: "";

  position: absolute;

  top: -18px;

  left: 50%;

  transform: translateX(-50%);

  width: 120px;

  height: 2px;

  background: linear-gradient(90deg, var(--btn-bg), var(--btn-bg-hover));

  opacity: 0.8;

  border-radius: 2px;

}





#kontakt.experience-section {

  background: linear-gradient(135deg, #232526 0%, #0f2027 100%);

  color: var(--text-color);

  min-height: 100vh;

  padding: 70px 0 70px 0;

  display: flex;

  align-items: center;

  justify-content: center;

}



#kontakt .section-title {

  background: linear-gradient(45deg, var(--btn-bg), var(--btn-bg-hover));

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  margin-bottom: 0.7rem;

}







#kontakt .card.contact-card {

  background: rgba(38, 50, 56, 0.55) !important;

  border-radius: 1.4rem;

  box-shadow: 0 14px 54px 0 rgba(5, 209, 90, 0.11),

    0 3px 18px rgba(0, 0, 0, 0.15);

  border: 1.8px solid rgba(5, 209, 90, 0.1);

  padding: 3.2rem 2.8rem 2.8rem 2.8rem;

  max-width: 570px;

  margin: 0 auto;

  position: relative;

  z-index: 2;

  transition: box-shadow 0.2s, border-color 0.16s;

  backdrop-filter: blur(12px);

  display: flex;

  flex-direction: column;

}



#kontakt label.form-label {

  color: #fff;

  font-weight: 600;

  font-size: 1.11rem;

  letter-spacing: 0.2px;

  margin-bottom: 0.5rem;

}



#kontakt .form-control {

  background: rgba(255, 255, 255, 0.14);

  border: 1.6px solid rgba(5, 209, 90, 0.16);

  color: #fff;

  border-radius: 1.2rem;

  box-shadow: 0 2px 12px 0 rgba(5, 209, 90, 0.08);

  font-size: 1.22rem;

  padding: 1.16rem 1.25rem;

  margin-bottom: 1.2rem;

  min-height: 54px;

  transition: border-color 0.24s, box-shadow 0.19s, background 0.16s;

}



#kontakt .form-control:focus {

  border-color: var(--btn-bg-hover);

  background: rgba(5, 209, 90, 0.11);

  outline: none;

  box-shadow: 0 0 0 3px rgba(5, 209, 90, 0.18);

  color: #fff;

}



#kontakt .form-control::placeholder {

  color: #d0d0d0;

  opacity: 1;

  font-size: 1.08rem;

}



#kontakt .invalid-feedback {

  color: #ffe75e;

  font-size: 1.06rem;

  margin-top: 0.25rem;

  font-weight: 500;

}



#kontakt .btn-primary-custom {

  color: #fff;

  margin-top: 1.5rem;

  padding: 1.12rem 0;

  font-size: 1.22rem;

  font-weight: 700;

  border-radius: 44px;

  background: linear-gradient(90deg, var(--btn-bg), var(--btn-bg-hover));

  box-shadow: 0 7px 32px 0 rgba(5, 209, 90, 0.15);

  letter-spacing: 0.5px;

  border: none;

  width: 100%;

  transition: background 0.3s, box-shadow 0.22s;

}



#kontakt .btn-primary-custom:focus {

  background: var(--cta-bg-hover);

  box-shadow: 0 0 0 4px rgba(5, 209, 90, 0.18);

  outline: none;

}



@media (max-width: 900px) {

  #kontakt .card.contact-card {

    padding: 2.2rem 1.1rem 1.8rem 1.1rem;

    max-width: 98vw;

  }

  #kontakt .form-control {

    font-size: 1.12rem;

    padding: 1rem 1rem;

    min-height: 47px;

  }

}



@media (max-width: 576px) {

  #kontakt .card.contact-card {

    padding: 1.4rem 0.2rem 1.2rem 0.2rem;

    border-radius: 1.05rem;

    max-width: 100vw;

  }

  #kontakt .form-control {

    font-size: 1rem;

    padding: 0.94rem 0.8rem;

    min-height: 43px;

  }

  #kontakt .btn-primary-custom {

    font-size: 1.05rem;

    padding: 0.97rem 0;

  }

}



#backToTop {

  position: fixed;

  bottom: 30px;

  right: 30px;

  width: 45px;

  height: 45px;

  border: none;

  border-radius: 50%;

  background-color: var(--btn-bg);

  color: #fff;

  font-size: 1.2rem;



  opacity: 0;

  transform: translateY(20px);



  display: flex;

  align-items: center;

  justify-content: center;



  pointer-events: none;



  transition: opacity 0.4s ease, transform 0.4s ease;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

  z-index: 1000;

}

@media (hover: hover) and (pointer: fine) {

  #backToTop.show:hover {

    background-color: var(--btn-bg-hover);

    transform: translateY(-4px);

  }

}



#backToTop.show {

  opacity: 1;

  transform: translateY(0);

  pointer-events: auto;

}

.gradient-text {

  background: linear-gradient(90deg, #05d15a 10%, #46e8d7 60%, #008b3a 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}

.badge-trust {

  display: inline-block;

  font-size: 1.1rem;

  background: rgba(255, 255, 255, 0.12);

  color: #fff;

  border: 1.5px solid #05d15a;

  border-radius: 16px;

  padding: 6px 16px 6px 12px;

  margin-bottom: 14px;

  font-weight: 600;

  letter-spacing: 0.4px;

  box-shadow: 0 2px 14px 0 rgba(5, 209, 90, 0.09);

  backdrop-filter: blur(6px);

  transition: box-shadow 0.2s;

}

.badge-trust i {

  color: #ffe75e;

  margin-right: 6px;

}

.btn-primary-custom {

  animation: pulseBtn 2.5s infinite;

}

@keyframes pulseBtn {

  0%,

  100% {

    box-shadow: 0 0 0 0 rgba(5, 209, 90, 0.3);

  }

  50% {

    box-shadow: 0 0 14px 6px rgba(5, 209, 90, 0.13);

  }

}

@media (hover: none) and (pointer: coarse) {

  .btn-primary-custom {

    animation: none !important;

  }



  .btn-primary-custom:hover,

  .btn-primary-custom:active,

  .btn-primary-custom:focus {

    background-color: var(--cta-bg-hover) !important;

    transform: none !important;

    box-shadow: none !important;

  }



  .btn-primary-custom:hover::before,

  .btn-primary-custom:active::before,

  .btn-primary-custom:focus::before {

    left: -100% !important;

  }



  .btn-primary-custom:hover .btn-icon,

  .btn-primary-custom:active .btn-icon,

  .btn-primary-custom:focus .btn-icon {

    transform: none !important;

  }

}



@media (hover: hover) and (pointer: fine) {

  .btn-primary-custom:hover {

    background-color: var(--btn-bg-hover);

  }

  .btn-primary-custom:hover::before {

    left: 100%;

  }

}

@media (hover: none) and (pointer: coarse) {

  .btn:hover,

  .btn:active,

  .btn:focus,

  .btn.active,

  .btn-primary-custom:hover,

  .btn-primary-custom:active,

  .btn-primary-custom:focus {

    transform: none !important;

    filter: none !important;

    background-color: var(--cta-bg-hover) !important;

    border-color: var(--cta-bg) !important;

    box-shadow: none !important;

    color: inherit !important;

    animation: none !important;

  }



  .btn,

  .btn-primary-custom {

    transition: none !important;

    animation: none !important;

  }



  .btn::before,

  .btn::after,

  .btn-primary-custom::before,

  .btn-primary-custom::after {

    display: none !important;

  }

}



@media (hover: hover) and (pointer: fine) {

  .btn:hover,

  .btn-primary-custom:hover {

    box-shadow: 0 4px 15px rgba(0, 139, 58, 0.2);

  }

}

@media (hover: none) and (pointer: coarse) {

  .animate-button a,

  .btn-primary-custom {

    transition: none !important;

    animation: none !important;

    transform: none !important;

    background-color: var(--cta-bg) !important;

  }



  .animate-button a::before,

  .btn-primary-custom::before {

    display: none !important;

  }



  .animate-button a:hover,

  .animate-button a:active,

  .animate-button a:focus,

  .btn-primary-custom:hover,

  .btn-primary-custom:active,

  .btn-primary-custom:focus {

    transform: none !important;

    background-color: var(--cta-bg) !important;

    box-shadow: none !important;

  }



  .btn-primary-custom:hover .btn-icon,

  .btn-primary-custom:active .btn-icon,

  .btn-primary-custom:focus .btn-icon {

    transform: none !important;

  }



  .btn-primary-custom {

    animation: none !important;

  }

}



@media (hover: hover) and (pointer: fine) {

  .btn-primary-custom:hover {

    background-color: var(--cta-bg-hover);

  }



  .btn-primary-custom:hover::before {

    left: 100%;

  }



  .btn-primary-custom:hover .btn-icon {

    transform: translateX(5px);

  }

}

.floating-icon {

  transition: transform 0.2s;

}



.navbar-toggler {

  border: none;

  background: transparent !important;

  outline: none;

  box-shadow: none !important;

  padding: 0.5rem 0.7rem;

}



.navbar-toggler-icon {

  background-image: none !important;

  width: 2rem;

  height: 2rem;

  position: relative;

  display: inline-block;

}



.navbar-toggler-icon::before,

.navbar-toggler-icon::after,

.navbar-toggler-icon span {

  content: "";

  display: block;

  height: 3px;

  width: 100%;

  background: #fff;

  border-radius: 2px;

  margin: 6px 0;

  transition: all 0.3s cubic-bezier(0.77, 0, 0.18, 1);

}



.navbar-toggler-icon span {

  margin: 0;

}



.navbar-toggler.collapsed .navbar-toggler-icon::before {

  transform: rotate(0) translateY(0);

}

.navbar-toggler.collapsed .navbar-toggler-icon::after {

  transform: rotate(0) translateY(0);

}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon::before {

  transform: rotate(45deg) translateY(8px);

}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon::after {

  transform: rotate(-45deg) translateY(-8px);

}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon span {

  opacity: 0;

}

#vykon.experience-section {

  background: linear-gradient(135deg, #232526 0%, #0f2027 100%);

  color: var(--text-color);

  padding: 60px 0 60px 0;

  position: relative;

  overflow: hidden;

  min-height: 100vh;

  display: flex;

  align-items: center;

}



#vykon .container {

  display: flex;

  align-items: stretch;

  justify-content: center;

  flex-wrap: wrap;

}



#vykon .row {

  width: 100%;

}



#vykon .card-vykon {

  background: rgba(38, 50, 56, 0.55);

  border-radius: 1.2rem;

  box-shadow: 0 8px 36px 0 rgba(0, 0, 0, 0.17);

  border: 1.5px solid rgba(255, 255, 255, 0.08);

  padding: 2.5rem 2.2rem 2.2rem 2.2rem;

  min-height: 400px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  transition: box-shadow 0.28s, border-color 0.25s;

}



#vykon .section-title {

  letter-spacing: 1px;

  margin-bottom: 1.2rem;

}







#vykon .d-flex {

  align-items: center;

}



#vykon .score-circle {

  flex: none;

  width: 80px;

  height: 80px;

  border-radius: 50%;

  background: rgba(5, 209, 90, 0.18);

  border: 4px solid var(--btn-bg);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 2.1rem;

  font-weight: bold;

  color: var(--btn-bg);

  box-shadow: 0 2px 16px rgba(5, 209, 90, 0.15);

  margin-right: 20px;

  margin-bottom: 0;

  transition: transform 0.3s, box-shadow 0.3s;

}



#vykon .score-circle:hover {

  transform: scale(1.09);

  box-shadow: 0 8px 24px rgba(5, 209, 90, 0.29);

}



#vykon .vykon-list {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 0.5rem 1.6rem;

  margin-top: 2.5rem;

  padding-left: 0;

}



#vykon .vykon-list li {

  display: flex;

  align-items: center;

  font-size: 1.04rem;

  color: #e0e0e0;

  margin-bottom: 0.65rem;

}



#vykon .vykon-list i {

  color: #05d15a;

  margin-right: 0.7em;

  font-size: 1.1em;

}



#vykon .typed-keywords {

  color: #05d15a;

  font-weight: 600;

  letter-spacing: 0.7px;

}



#vykon .img-wrapper {

  position: relative;

  border-radius: 1.2rem;

  overflow: hidden;

  box-shadow: 0 8px 36px 0 rgba(0, 0, 0, 0.15);

  margin-bottom: 1.3rem;

  margin-top: 1rem;

}



#vykon .img-wrapper img {

  width: 100%;

  object-fit: cover;

  border-radius: 1.2rem;

  min-height: 240px;

  transition: transform 0.36s cubic-bezier(0.46, 1.45, 0.64, 1);

}



#vykon .img-wrapper:hover img {

  transform: scale(1.07);

  filter: brightness(1.1) blur(0.3px);

}



#vykon .overlay {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  background: linear-gradient(

    134deg,

    rgba(0, 139, 58, 0.14),

    rgba(40, 40, 40, 0.91) 80%

  );

  color: #fff;

  opacity: 0;

  transition: opacity 0.33s;

  padding: 1.8rem 1rem 1.4rem 1rem;

  z-index: 4;

  border-radius: 0 0 1.2rem 1.2rem;

  text-align: left;

  pointer-events: none;

}



#vykon .img-wrapper:hover .overlay,

#vykon .img-wrapper:focus-within .overlay {

  opacity: 1;

  pointer-events: auto;

}



#vykon .overlay-text {

  font-size: 1.13rem;

  font-weight: 500;

  margin-bottom: 0.7rem;

  opacity: 0.92;

}



#vykon .overlay-btn {

  background: var(--btn-bg);

  color: #fff;

  border-radius: 50px;

  padding: 0.42rem 1.22rem;

  font-size: 1rem;

  font-weight: 600;

  text-decoration: none;

  transition: background 0.3s;

  border: none;

  margin-top: 0.2rem;

  display: inline-block;

}



#vykon .overlay-btn:hover {

  background: var(--btn-bg-hover);

}



@media (max-width: 991px) {

  #vykon .container,

  #vykon .row {

    flex-direction: column;

    align-items: center;

  }

  #vykon .card-vykon {

    margin-bottom: 2rem;

    min-height: 370px;

    padding: 1.7rem 1.1rem;

  }

}



@media (max-width: 700px) {

  #vykon .container,

  #vykon .row {

    flex-direction: column;

    align-items: stretch;

  }

  #vykon .img-wrapper,

  #vykon .card-vykon {

    margin: 0 auto 1.5rem auto;

    min-width: 95%;

  }

  #vykon .score-circle {

    width: 62px;

    height: 62px;

    font-size: 1.18rem;

  }

  #vykon .vykon-list {

    grid-template-columns: 1fr;

    gap: 0.35rem;

  }

}

@media (hover: none) and (pointer: coarse) {

  #vykon .img-wrapper .overlay {

    opacity: 1 !important;

    pointer-events: auto !important;

    position: static;

    background: rgba(38, 50, 56, 0.9);

    color: #fff;

    border-radius: 0 0 1.2rem 1.2rem;

    padding: 1rem 0.7rem 1rem 0.7rem;

    transition: none;

    text-align: left;

    box-shadow: none;

  }



  #vykon .img-wrapper img {

    filter: none !important;

    transform: none !important;

  }

}



@media (hover: none) and (pointer: coarse) {

  #vykon .img-wrapper:hover .overlay,

  #vykon .img-wrapper:focus-within .overlay {

    opacity: 1 !important;

    pointer-events: auto !important;

  }

}



::-webkit-scrollbar {

  width: 12px;

  height: 12px;

}



::-webkit-scrollbar-track {

  background: transparent;

  margin: 16px 0;

  border-radius: 8px;

}



::-webkit-scrollbar-thumb {

  background: linear-gradient(

    135deg,

    rgba(5, 209, 90, 0.8),

    rgba(70, 232, 215, 0.8)

  );

  border-radius: 8px;

  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4), 0 0 8px rgba(5, 209, 90, 0.6);

  transition: all 0.3s ease;

}



::-webkit-scrollbar-thumb:hover {

  background: linear-gradient(

    135deg,

    rgba(5, 209, 90, 1),

    rgba(70, 232, 215, 1)

  );

  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6), 0 0 12px rgba(5, 209, 90, 0.8);

  transform: scale(1.05);

}



::-webkit-scrollbar-corner {

  background: transparent;

}



html {

  scrollbar-width: thin;

  scrollbar-color: 

     rgba(5, 209, 90, 0.8)  transparent;

}



.card-img-top {

  width: 100%;

  height: 330px;

  object-fit: cover;

  border-bottom-left-radius: 1.5rem;

  border-bottom-right-radius: 1.5rem;

}



.footer-section {

  background: linear-gradient(to bottom, #232323 0%, #111 100%);

  border-top: 1px solid rgba(255, 255, 255, 0.06);

  position: relative;

  overflow: hidden;

  color: #eee;

}

.footer-separator {

  height: 2px;

  background: linear-gradient(90deg, transparent, #05d15a, transparent);

  position: relative;

  margin-bottom: -1px;

  overflow: hidden;

}

.footer-heading {

  color: #05d15a;

  margin-bottom: 1rem;

  font-size: 1.1rem;

  letter-spacing: 0.5px;

}

.footer-link,

.footer-links a,

.footer-bottom-links a,

.created-by-link {

  color: rgba(255, 255, 255, 0.72);

  text-decoration: none;

  transition: color 0.3s, transform 0.3s;

}

.footer-link:hover,

.footer-links a:hover,

.footer-bottom-links a:hover,

.created-by-link:hover {

  color: #05d15a;

  transform: translateX(5px);

}

.footer-logo-box {

  margin-bottom: 1rem;

}

.footer-contact-list {

  padding-left: 0;

  list-style: none;

}

.footer-contact-list li {

  margin-bottom: 0.5rem;

}

.footer-icon {

  color: #05d15a;

  margin-right: 7px;

  width: 18px;

}

.footer-divider {

  height: 1px;

  background: linear-gradient(

    90deg,

    transparent,

    #05d15a 40%,

    transparent 100%

  );

  opacity: 0.2;

  width: 100%;

}

.footer-bottom {

  font-size: 0.97rem;

  color: rgba(255, 255, 255, 0.54);

}

.footer-bottom-links a {

  color: rgba(255, 255, 255, 0.54);

  margin-left: 0.5rem;

  margin-right: 0.5rem;

}

.social-links {

  display: flex;

  gap: 1rem;

}

.social-link {

  width: 38px;

  height: 38px;

  display: flex;

  text-decoration: none;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.555);

  color: #fff;

  font-size: 1.2rem;

  transition: all 0.3s;

}

.social-link:hover {

  background: #05d15a;

  color: #fff;

  transform: translateY(-2px);

}

@media (max-width: 991px) {

  .footer-section .row > div {

    align-items: flex-start !important;

    text-align: left !important;

  }

}

@media (max-width: 767px) {

  .footer-section .row > div {

    align-items: center !important;

    text-align: center !important;

    margin-bottom: 2rem;

  }

  .footer-bottom {

    text-align: center;

  }

  .footer-bottom-links {

    justify-content: center !important;

    margin-top: 1rem;

  }

}



.form-control.is-invalid {

  border-color: #dc3545 !important;

  box-shadow: 0 0 0 .2rem rgba(220,53,69,.25) !important;

}

.form-control.is-invalid:focus {

  border-color: #dc3545 !important;

  box-shadow: 0 0 0 .2rem rgba(220,53,69,.25) !important;

}

.form-control.is-invalid ~ .invalid-feedback {

  display: block !important;

  color: #f2c2c6;

}



.contact-card .form-control {

  background: rgba(255,255,255,0.06);

  color: #fff;

}

.contact-card .form-control::placeholder { color: rgba(255,255,255,0.6); }





.page-webs .page-hero{

  position:relative;

  background:var(--hero-gradient);

  min-height:clamp(56vh,72vh,86vh);

  padding:clamp(96px,12vh,128px) 0 64px;

  overflow:hidden;

  isolation:isolate;

}



.page-webs .page-hero::before{

  content:"";

  position:absolute;inset:-2px;

  background:

    radial-gradient(1200px 520px at 82% 18%, rgba(5,209,90,.18), transparent 60%),

    radial-gradient(900px 480px at 8% 88%, rgba(70,232,215,.12), transparent 65%);

  z-index:-2;

}



.page-webs .page-hero::after{

  content:"";

  position:absolute;inset:0;

  background-image:

    linear-gradient(transparent, rgba(0,0,0,.12) 55%, rgba(0,0,0,.22)),

    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),

    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);

  background-size:100% 100%, 44px 44px, 44px 44px;

  opacity:.18;

  mix-blend-mode:overlay;

  z-index:-1;

}



.page-webs .page-hero .hero-title{

  font-family:"Space Grotesk", Arial, sans-serif;

  font-weight:800;

  line-height:1.05;

  font-size:clamp(2.1rem,4.4vw,3.2rem);

  letter-spacing:.4px;

  margin-bottom:.6rem;

  background: #fff;

  -webkit-background-clip:text;background-clip:text;

  -webkit-text-fill-color:transparent;

}

.page-webs .page-hero .lead-muted{color:#cfe9da;opacity:.95;}

.page-webs .page-hero .hero-image{

  max-width:100%;height:auto;

  filter:drop-shadow(0 10px 20px rgba(0,0,0,.15));

  transition:transform .35s cubic-bezier(.2,.8,.2,1);

}

@media (hover:hover) and (pointer:fine){

  .page-webs .page-hero .hero-image:hover{transform:translateY(-6px) scale(1.02);}

}





.page-webs .breadcrumb-bar{

  display:inline-flex;align-items:center;gap:.4rem;

  padding:.55rem .95rem;border-radius:999px;

  background:rgba(255,255,255,.06);

  border:1px solid rgba(255,255,255,.12);

  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);

  box-shadow:0 8px 24px rgba(0,0,0,.15);

  margin-bottom:1.1rem;

}

.page-webs .crumb-divider{

  height:2px;width:100%;

  background:linear-gradient(90deg, transparent, #05d15a 40%, transparent);

  opacity:.35;margin-top:.55rem;border-radius:2px;

}

.page-webs .breadcrumb{

  --bc-muted:rgba(255,255,255,.78);

  --bc-strong:#fff;

  margin:0;padding:0;list-style:none;

  display:inline-flex;align-items:center;white-space:nowrap;

  font-size:.98rem;

}

.page-webs .breadcrumb li{display:inline-flex;align-items:center;min-width:0;}

.page-webs .breadcrumb li+li::before{

  content:"›";margin:0 .55rem;opacity:.65;

}

.page-webs .breadcrumb a{

  color:var(--bc-muted);text-decoration:none;position:relative;

  transition:color .2s ease;

}

@media (hover:hover) and (pointer:fine){

  .page-webs .breadcrumb a:hover{color:var(--bc-strong);}

  .page-webs .breadcrumb a:hover::after{

    content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;

    background:linear-gradient(90deg,var(--btn-bg),var(--btn-bg-hover));border-radius:2px;

  }

}

.page-webs .breadcrumb .active,

.page-webs .breadcrumb [aria-current="page"]{

  color:var(--bc-strong);font-weight:700;

  background:linear-gradient(90deg,var(--btn-bg),var(--btn-bg-hover));

  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;

}



@media (max-width:576px){

  .page-webs .breadcrumb li:not(:first-child):not(:last-child){display:none;}

  .page-webs .breadcrumb li:first-child::after{

    content:"…";margin:0 .45rem 0 .55rem;opacity:.75;

  }

}



@media (prefers-reduced-motion:reduce){

  .page-webs .page-hero::after{background-image:none;}

}



.btn-secondary-custom{

  background: rgba(255,255,255,0.10);

  color:#fff;

  border:1.5px solid rgba(255,255,255,0.18);

  border-radius:36px;

  padding:.72rem 1.4rem;

  font-weight:700;

  letter-spacing:.3px;

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);

  transition:

    background-color .25s ease,

    border-color .25s ease,

    box-shadow .25s ease,

    transform .25s ease;

  position: relative;

  overflow: hidden;

}





.btn-secondary-custom .btn-icon{

  margin-left:.5rem;

  transition: transform .3s ease;

}





@media (hover:hover) and (pointer:fine){

  .btn-secondary-custom:hover{

    background: rgba(255,255,255,0.16);

    border-color: rgba(255,255,255,0.28);

    box-shadow: 0 6px 20px rgba(0,0,0,.25),

                0 0 0 3px rgba(5,209,90,.12);

    transform: translateY(-1px);

  }

  .btn-secondary-custom:hover .btn-icon{

    transform: translateX(4px);

  }



}









.btn-secondary-custom:disabled,

.btn-secondary-custom.disabled{

  opacity:.6;

  cursor:not-allowed;

  box-shadow:none;

  transform:none;

}





@media (hover:none) and (pointer:coarse),

       (prefers-reduced-motion:reduce){

  .btn-secondary-custom,

  .btn-secondary-custom:hover,

  .btn-secondary-custom:active{

    transition:none !important;

    transform:none !important;

    box-shadow:none !important;

    background: rgba(255,255,255,0.10) !important;

  }

}



.navbar .nav-link { position: relative; }

.navbar .nav-link .nav-underline{

  position: absolute;

  left: 0; right: 0; bottom: -2px;

  height: 2px; width: 100%; 

  background: linear-gradient(90deg, var(--btn-bg), var(--btn-bg-hover));

  transform-origin: left center;

  transform: scaleX(0);

  will-change: transform;

  transition: transform .18s ease;

}





@media (hover:hover) and (pointer:fine){

  .navbar .nav-link:hover .nav-underline{ transform: scaleX(1); }

}





.navbar .nav-link:focus-visible .nav-underline{ transform: scaleX(1); }





@media (hover:none) and (pointer:coarse){

  .navbar .nav-link .nav-underline{ transition: transform .12s linear; }

}

@media (max-width: 768px){ .floating-elements{ display:none !important; } }







#jak-to-probiha {

  --chip-bg: linear-gradient(90deg, var(--btn-bg), var(--btn-bg-hover));

  --card-bg: rgba(38, 50, 56, 0.50);

  --card-bd: rgba(255, 255, 255, 0.09);



  background: linear-gradient(135deg, #232526 0%, #0f2027 100%);

  color: var(--text-color);

  padding: 60px 0;

  position: relative;

  overflow: hidden;

  isolation: isolate;

}



#jak-to-probiha .section-title {

  margin-bottom: .35rem;

  letter-spacing: 1px;

}



.lead {

  color: var(--muted);

  font-weight: 400;

  margin-bottom: 1.6rem;

}









#jak-to-probiha .card-vykon {

  background: var(--card-bg);

  border-radius: 1.2rem;

  box-shadow: 0 8px 36px rgba(0,0,0,.17);

  border: 1.5px solid var(--card-bd);

  transition: transform .32s cubic-bezier(0.4, 2, 0.3, 1), box-shadow .22s, border-color .24s;

  display: flex; flex-direction: column; align-items: center;

  min-height: 320px; text-align: center;

  padding: 2rem 1.2rem;

  position: relative;

  outline: none;

}



@media (hover:hover) and (pointer:fine) {

  #jak-to-probiha .card-vykon:hover {

    transform: translateY(-8px);

    box-shadow: 0 16px 40px rgba(5,209,90,.15), 0 2px 18px rgba(0,0,0,.14);

    border-color: #05d15acc;

  }

}

#jak-to-probiha .card-vykon:focus-visible {

  border-color: #05d15acc;

  box-shadow: 0 0 0 4px rgba(5,209,90,.18);

}





#jak-to-probiha .step-index {

  position: absolute;

  top: -14px; left: 16px;

  width: 36px; height: 36px;

  display: inline-flex; align-items: center; justify-content: center;

  border-radius: 999px;

  background: var(--chip-bg);

  color: #fff; font-weight: 800; font-size: .98rem; letter-spacing: .2px;

  border: 1px solid rgba(255,255,255,.18);

  box-shadow: 0 6px 18px rgba(5,209,90,.18), 0 2px 8px rgba(0,0,0,.18);

}





#jak-to-probiha .icon-wrapper {

  --size: 72px;

  width: var(--size); height: var(--size);

  border-radius: 50%;

  display: grid; place-items: center;

  background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.14), rgba(255,255,255,.06));

  border: 1.5px solid rgba(255,255,255,.14);

  box-shadow: inset 0 0 0 2px rgba(5,209,90,.15), 0 6px 18px rgba(5,209,90,.10);

  margin-bottom: 1rem;

  position: relative;

}

#jak-to-probiha .icon-wrapper::after {

  

  content: "";

  position: absolute; inset: -2px;

  border-radius: 50%;

  background: conic-gradient(from 0deg, var(--btn-bg), var(--btn-bg-hover));

  mask: radial-gradient(farthest-side, transparent calc(50% - 2px), #000 calc(50% - 1px));

  opacity: .9;

}

#jak-to-probiha .service-icon {

  font-size: 24px; color: #fff;

}





#jak-to-probiha .card-vykon h3 {

  font-size: 1.1rem; font-weight: 700; margin-bottom: .55rem; color: #fff;

  background: linear-gradient(90deg, var(--btn-bg), var(--btn-bg-hover));

  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;

}

#jak-to-probiha .card-vykon p {

  font-size: .98rem; color: var(--muted);

}





#jak-to-probiha .steps { position: relative; }











#jak-to-probiha .steps-cta {

  margin-top: .8rem;

}



#jak-to-probiha {

  

  --connector-color: rgba(5, 209, 90, 0.4);

}





#jak-to-probiha .steps {

  position: relative; 

  display: flex; 

  align-items: center; 

  justify-content: center; 

}



#jak-to-probiha .steps-connecting-line {

  position: absolute;

  top:  95%; 

  left: 0;

  right: 0;

  height: 2px;

  background: repeating-linear-gradient(

    to right,

    var(--connector-color) 0%,

    var(--connector-color) 10px,

    transparent 10px,

    transparent 20px

  ); 

  z-index: 1; 

  pointer-events: none; 

}



@media (max-width: 991px) {

  

  #jak-to-probiha .steps-connecting-line {

    display: none;

  }

  #jak-to-probiha .card-vykon {

    margin-bottom: 1.5rem; 

  }

}





#jak-to-probiha .step-index {

  

  transform: translateY(-14px) scale(0.9); 

  opacity: 0;

  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s;

}



#jak-to-probiha .card-vykon[data-aos-id].aos-animate .step-index {

  transform: translateY(-14px) scale(1); 

  opacity: 1;

}





#jak-to-probiha .icon-wrapper::after {

  

  transform: rotate(0deg);

  opacity: 0; 

  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s;

}



#jak-to-probiha .card-vykon[data-aos-id].aos-animate .icon-wrapper::after {

  transform: rotate(360deg); 

  opacity: 0.9;

}



.why-us-section-alt {

  background: linear-gradient(135deg, #232526 0%, #0f2027 100%);

  color: var(--text-color);

  padding: 60px 0;

  position: relative;

}



.why-us-section-alt .section-title {

  background: linear-gradient(45deg, var(--btn-bg), var(--btn-bg-hover));

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  letter-spacing: 0.6px;

}



.why-timeline {

  position: relative;

  margin-left: 1.5rem;

  padding-left: 2rem;

}



.why-timeline::before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  bottom: 0;

  width: 3px;

  background: linear-gradient(

    to bottom,

    transparent,

    rgba(5, 209, 90, 0.35) 20%,

    rgba(5, 209, 90, 0.35) 80%,

    transparent

  );

  z-index: 0;

  transform: scaleY(0);

  transform-origin: top;

  transition: transform 0.8s ease-out;

}



.why-timeline.aos-animate::before {

  transform: scaleY(1);

}



.timeline-item {

  position: relative;

  display: flex;

  align-items: flex-start;

  gap: 1.5rem;

  margin-bottom: 2.8rem;

}



.timeline-item:last-child {

  margin-bottom: 0;

}



.timeline-icon {

  position: absolute;

  left: -30px;

  top: 0;

  width: 40px;

  height: 40px;

  background: linear-gradient(135deg, var(--btn-bg), var(--btn-bg-hover));

  color: #fff;

  display: grid;

  place-items: center;

  border-radius: 50%;

  border: 2px solid #0f2027;

  box-shadow: 0 0 0 4px rgba(5, 209, 90, 0.1), 0 4px 12px rgba(0, 0, 0, 0.2);

  z-index: 2;

  font-size: 1.2rem;

  transform: scale(0.8);

  opacity: 0;

  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s;

}



.timeline-item.aos-animate .timeline-icon {

  transform: scale(1);

  opacity: 1;

}



.timeline-content {

  flex: 1;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.07);

  padding: 1.2rem 1.6rem;

  border-radius: 1rem;

  backdrop-filter: blur(8px);

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);

  transition: transform 0.3s ease, box-shadow 0.2s, border-color 0.2s, background 0.2s;

}



.timeline-content h3 {

  margin-bottom: 0.5rem;

  background: linear-gradient(90deg, var(--btn-bg), var(--btn-bg-hover));

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  font-weight: 700;

}



.timeline-content p {

  font-size: 1rem;

  color: #c0c0c0;

  line-height: 1.6;

}



@media (hover:hover) and (pointer:fine) {

  .timeline-content:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(5, 209, 90, 0.1);

    border-color: rgba(5, 209, 90, 0.3);

    background: rgba(255, 255, 255, 0.05);

  }

}



.timeline-content:focus-within {

  transform: translateY(-5px);

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(5, 209, 90, 0.1);

  border-color: rgba(5, 209, 90, 0.3);

  background: rgba(255, 255, 255, 0.05);

}



@media (max-width: 767.98px) {

  .why-timeline {

    margin-left: 0;

    padding-left: 1.5rem;

  }



  .timeline-icon {

    left: -20px;

    width: 36px;

    height: 36px;

  }



  .timeline-content {

    padding: 1rem 1.2rem;

  }

}



@media (hover: hover) and (pointer: fine) {

  #backToTop.show:hover {

    transform: translateY(-8px); 

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(5, 209, 90, 0.1);

  }

}

@media (prefers-reduced-motion: reduce) {

  #backToTop.show {

    animation: none; 

    transform: translateY(0);

  }

}





.portfolio-card img {

  

  transition: transform 0.36s cubic-bezier(0.46, 1.45, 0.64, 1), filter 0.36s ease-out; 

}



@media (hover: hover) and (pointer: fine) {

  .portfolio-card:hover img {

    transform: scale(1.08);

    filter: brightness(1.1) blur(0.3px) grayscale(0.1); 

  }

}





.service-card {

  

  position: relative;

  z-index: 1;

  overflow: hidden;

  transition: transform 0.32s cubic-bezier(0.4, 2, 0.3, 1), box-shadow 0.22s, border-color 0.24s, background 0.24s;

}



@media (hover:hover) and (pointer:fine){

  .service-card:hover {

    transform: translateY(-12px);

    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25), 

                0 0 0 5px rgba(5, 209, 90, 0.08); 

    border-color: #05d15acc;

    background: rgba(38, 50, 56, 0.6); 

  }

}

.service-card:focus-within { 

  transform: translateY(-12px);

  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25),

              0 0 0 5px rgba(5, 209, 90, 0.08);

  border-color: #05d15acc;

  background: rgba(38, 50, 56, 0.6);

}



.custom-accordion .accordion-item {

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.07);

  border-radius: 1rem;

  margin-bottom: 1rem;

  overflow: hidden;

  box-shadow: 0 6px 20px rgba(0,0,0,0.1);

}



.custom-accordion .accordion-button {

  background: transparent;

  color: var(--text);

  font-weight: 600;

  font-size: 1.05rem;

  padding: 1rem 1.4rem;

  transition: background 0.3s ease, color 0.3s ease;

  box-shadow: none;

}



.custom-accordion .accordion-button::after {

  filter: brightness(1.2);

}



.custom-accordion .accordion-button:not(.collapsed) {

  background: linear-gradient(135deg, #0b6a3c, #14c971);

  color: #fff;

}



.custom-accordion .accordion-body {

  color: #c0c0c0;

  background: rgba(255, 255, 255, 0.02);

  padding: 1rem 1.4rem 1.2rem;

  font-size: .98rem;

  line-height: 1.6;

}



@media (hover: none) {

  .custom-accordion .accordion-button:hover {

    background: transparent;

  }

}

.faq-section-styled {

  background: linear-gradient(135deg, #232526 0%, #0f2027 100%);

  color: var(--text-color);

  padding: 60px 0 60px 0;

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;

}



.faq-accordion {

  display: grid;

  gap: 18px;

  max-width: 800px;

  margin-inline: auto;

}



.faq-accordion details {

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.07);

  border-radius: 1rem;

  padding: 0;

  overflow: hidden;

  box-shadow: 0 6px 20px rgba(0,0,0,0.1);

  transition: border-color 0.3s ease, box-shadow 0.3s ease;

}



.faq-accordion details[open] {

  border-color: #05d15acc;

}



.faq-accordion summary {

  cursor: pointer;

  font-weight: 600;

  font-size: 1.05rem;

  padding: 1.2rem 1.6rem;

  list-style: none;

  position: relative;

  background: transparent;

  display: flex;

  align-items: center;

  justify-content: space-between;

  color: var(--text-color);

}



.faq-accordion summary::after {

  content: "›";

  font-size: 1.2rem;

  transition: transform 0.3s ease;

  color: var(--btn-bg);

}



.faq-accordion details[open] summary::after {

  transform: rotate(90deg);

}





.faq-accordion .answer {

  overflow: hidden;

  height: 0;

  transition: height 0.35s ease;

  padding: 0 1.6rem;

  background: rgba(255, 255, 255, 0.015);

  border-top: 1px solid rgba(255,255,255,0.06);

}



.faq-accordion details[open] .answer {

  padding-bottom: 1.4rem;

}

.faq-accordion .answer p {

  color: #c0c0c0;

  font-size: 0.96rem;

  margin-top: 1rem;

  line-height: 1.6;

}

.faq-accordion .answer strong {

  color: var(--accent);

}

.faq-accordion-js {

  display: grid;

  gap: 18px;

  max-width: 800px;

  margin: 0 auto;

}



.faq-item {

  border-radius: 1rem;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.07);

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);

  overflow: hidden;

}



.faq-question {

  width: 100%;

  background: none;

  color: var(--text-color);

  text-align: left;

  font-weight: 600;

  font-size: 1.05rem;

  padding: 1.2rem 1.6rem;

  cursor: pointer;

  border: none;

  position: relative;

  transition: background 0.3s;

}



.faq-question::after {

  content: "›";

  position: absolute;

  right: 1.6rem;

  top: 50%;

  transform: translateY(-50%);

  color: var(--btn-bg);

  font-size: 1.2rem;

  transition: transform 0.3s ease;

}



.faq-item.open .faq-question::after {

  transform: translateY(-50%) rotate(90deg);

}



.faq-answer {

  padding: 0 1.6rem;

  color: #c0c0c0;

  font-size: 0.95rem;

  line-height: 1.6;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.5s ease, padding 0.3s ease;

}



.faq-item.open .faq-answer {

  padding: 1rem 1.6rem 1.2rem;

  max-height: 500px; 

}

.reviews-section {

  background: linear-gradient(135deg, #232526 0%, #0f2027 100%);

  color: var(--text-color);

  padding: 70px 0;

  position: relative;

  overflow: hidden;

}



.reviews-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

  gap: 2rem;

}



.review-card {

  background: rgba(38, 50, 56, 0.5);

  border-radius: 1.2rem;

  border: 1.5px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.17);

  padding: 2rem 1.5rem;

  text-align: left;

  transition: transform 0.35s ease, box-shadow 0.3s ease, border-color 0.3s ease;

}



.review-card:hover {

  transform: translateY(-6px) scale(1.03);

  border-color: #05d15acc;

  box-shadow: 0 16px 40px rgba(5, 209, 90, 0.15),

              0 2px 18px rgba(0, 0, 0, 0.14);

}



.review-header {

  display: flex;

  align-items: center;

  gap: 0.8rem;

  margin-bottom: 1rem;

}



.review-author {

  font-weight: 600;

  font-size: 1.15rem;

}



.review-rating {

  color: #ffe75e;

  font-size: 1.2rem;

}



.review-text {

  color: #e0e0e0;

  font-size: 1.05rem;

  line-height: 1.6;

  opacity: 0.95;

}

.elfsight-app-2c807297-7973-453b-b625-3aa8120c1ac2 button {

  display: none !important;

}

/* 🧹 Schová všechny verze Elfsight brandingu */

a[href*="elfsight.com/google-reviews-widget"],

a[href*="elfsight.com/widgets/google-reviews"],

a[href*="elfsight.com/?utm_source"],

a[href*="elfsight.com/?utm_medium"],

a[href*="elfsight.com/apps"] {

  display: none !important;

  visibility: hidden !important;

  opacity: 0 !important;

  height: 0 !important;

  width: 0 !important;

  margin: 0 !important;

  padding: 0 !important;

  pointer-events: none !important;

  overflow: hidden !important;

  z-index: -9999 !important;

}