/* Reset and Base Styles */
/* Container */
/* Header */
/* Hero Section */
/* Sections */
/* Features Section */
/* Gallery Section */
/* Pricing Section */
/* Footer */
/* Modal */
/* Responsive Design */
/* Tablet */
/* Desktop */
/* Large Desktop */
/* Mobile Navigation */
/* Animation delays for staggered effect */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #0a0a0a;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.highlight {
  color: #fff;
  font-weight: 700;
}

.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
}

.nav-logo {
  margin: 0 auto;
}
.nav-logo img {
  padding: 100px 0 50px 0;
  max-width: 300px;
  width: 100%;
  height: auto;
}

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: rgb(19, 21, 68);
  padding-top: 70px;
  background: radial-gradient(circle, rgb(55, 54, 70) 10%, transparent 11%);
  background-size: 1em 1em;
  background-color: #131545;
  opacity: 1;
}

.hero-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  display: grid;
  gap: 40px;
}

.hero-content {
  text-align: center;
}

.hero-title {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin: 20px 0;
  line-height: 1;
}
.hero-title span {
  color: rgb(249, 2, 97);
  font-weight: 900;
}

.hero-description {
  font-size: 18px;
  color: #ccc;
  margin-bottom: 32px;
  max-width: 600px;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.btn-primary {
  padding: 16px 32px;
  border-radius: 10em;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  min-width: 200px;
  background: rgb(249, 2, 97);
  color: #fff;
  box-shadow: 0 4px 20px rgba(255, 107, 107, 0.3);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(255, 107, 107, 0.4);
}

.hero-image {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-image img {
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

section {
  padding: 80px 0;
}

.color-bg-1 {
  background-color: #0b0a29;
}

.color-bg-2 {
  background-color: #131545;
}

.center {
  text-align: center;
}

.center-box {
  display: flex;
  justify-content: center !important;
  align-items: center !important;
}

.section-title {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 60px;
  color: #fff;
}
.section-title .highlight {
  color: rgb(249, 2, 97);
  font-weight: 900;
}

.features p {
  font-size: 18px;
  color: #ccc;
  margin: 32px 0;
}

.features-grid {
  display: grid;
  gap: 30px;
}
.features-grid.bg-img-features {
  margin-bottom: 50px;
}
.features-grid.bg-img-features .feature-card {
  position: relative;
}
.features-grid.bg-img-features .feature-card h3 {
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: 900;
  font-size: 40px;
}
.features-grid.bg-img-features .feature-card:nth-child(1):before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  opacity: 0.2;
  background-image: url("/application/assets/images/card.png");
  backdrop-filter: blur(10px);
}
.features-grid.bg-img-features .feature-card:nth-child(2):before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  opacity: 0.2;
  background-image: url("/application/assets/images/mobile.png");
  backdrop-filter: blur(10px);
}
.features-grid.bg-img-features .feature-card:nth-child(3):before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  opacity: 0.2;
  background-image: url("/application/assets/images/star.png");
  backdrop-filter: blur(10px);
}
.features-grid.images-features {
  margin-bottom: 50px;
}
.features-grid.images-features img {
  width: 100%;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
}
.features-grid.images-features .feature-card {
  padding: 0;
}
.features-grid.images-features .feature-card h3 {
  padding: 40px 30px;
}

.feature-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 40px 30px;
  border-radius: 16px;
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  opacity: 0;
  transform: translateY(30px);
}
.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(255, 107, 107, 0.2);
}
.feature-card h3 {
  font-size: 24px;
  color: #fff;
  margin: 20px 0;
}
.feature-card p {
  color: #ccc;
  line-height: 1.6;
}
.feature-card:nth-child(1) {
  transition-delay: 0.1s;
}
.feature-card:nth-child(2) {
  transition-delay: 0.2s;
}
.feature-card:nth-child(3) {
  transition-delay: 0.3s;
}
.feature-card:nth-child(4) {
  transition-delay: 0.4s;
}

.feature-card.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.feature-icon {
  font-size: 48px;
  margin-bottom: 20px;
  color: rgb(249, 2, 97);
  font-weight: 900;
}

.gallery {
  background: #0a0a0a;
}

.gallery-grid {
  display: grid;
  gap: 30px;
}

.gallery-item {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.3s ease;
}
.gallery-item img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.gallery-item:hover .gallery-overlay {
  opacity: 1;
}
.gallery-item:hover img {
  transform: scale(1.1);
}
.gallery-item:nth-child(1) {
  transition-delay: 0.1s;
}
.gallery-item:nth-child(2) {
  transition-delay: 0.2s;
}
.gallery-item:nth-child(3) {
  transition-delay: 0.3s;
}

.gallery-item.animate-in {
  opacity: 1;
  transform: scale(1);
}

.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-btn {
  padding: 12px 24px;
  background: rgb(249, 2, 97);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
}
.gallery-btn:hover {
  background: rgb(249, 2, 97);
  transform: translateY(-2px);
}

.pricing {
  background: #111;
}
.pricing p {
  font-size: 18px;
  color: #ccc;
  margin: 30px 0 50px;
}

.text-left {
  text-align: left;
}

.pricing-grid {
  display: grid;
  gap: 0px;
}

.pricing-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 40px 30px;
  text-align: center;
  backdrop-filter: blur(10px);
  position: relative;
  transition: transform 0.3s ease;
  opacity: 0;
  transform: translateY(30px);
}
.pricing-card h3 {
  font-size: 24px;
  color: #fff;
  margin-bottom: 20px;
}
.pricing-card:nth-child(1) {
  transition-delay: 0.1s;
}
.pricing-card:nth-child(2) {
  transition-delay: 0.2s;
}
.pricing-card:nth-child(3) {
  transition-delay: 0.3s;
}

.pricing-card.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.pricing-card.featured {
  transform: scale(1.05);
  border: 1px solid rgb(249, 2, 97);
  z-index: 1;
}

.price {
  font-size: 36px;
  font-weight: 700;
  color: rgb(249, 2, 97);
  margin-bottom: 30px;
}
.price span {
  font-size: 16px;
  color: #ccc;
}

.features-list {
  list-style: none;
  margin-bottom: 30px;
}
.features-list li {
  color: #ccc;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.features-list li:last-child {
  border-bottom: none;
}

.btn-pricing {
  width: 100%;
  padding: 16px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  transition: all 0.3s ease;
}
.btn-pricing:hover {
  background: #fff;
  color: #0a0a0a;
}

.btn-pricing.primary {
  background: rgb(249, 2, 97);
  border-color: rgb(249, 2, 97);
}

.footer {
  background: #000;
  padding: 60px 0 20px;
}

.footer-content {
  margin-bottom: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-section {
  margin: 0 auto;
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #ccc;
}

@media (min-width: 768px) {
  .nav-menu {
    display: flex;
  }
  .nav-toggle {
    display: none;
  }
  .hero-container {
    grid-template-columns: 2fr 1fr;
    align-items: center;
    gap: 60px;
  }
  .hero-content {
    text-align: left;
  }
  .hero-actions {
    flex-direction: row;
    justify-content: flex-start;
  }
  .hero-title {
    font-size: 48px;
  }
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .container {
    padding: 0 40px;
  }
  .hero-title {
    font-size: 50px;
  }
  .hero-description {
    font-size: 20px;
  }
  .hero-image img {
    max-width: 500px;
  }
  .features-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .features-grid.bg-img-features {
    grid-template-columns: repeat(3, 1fr);
  }
  .features-grid.images-features {
    grid-template-columns: repeat(2, 1fr);
  }
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1200px) {
  .hero-container {
    gap: 80px;
  }
  .section-title {
    font-size: 42px;
  }
}
@media (max-width: 767px) {
  .nav-menu {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: rgba(10, 10, 10, 0.98);
    flex-direction: column;
    padding: 40px 20px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  .nav-menu a {
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .nav-menu.active {
    display: flex;
    transform: translateX(0);
  }
}
.testimonial-grid {
  display: grid;
  gap: 30px;
  margin-bottom: 50px;
}

.testimonial {
  background: rgb(19, 21, 68);
  padding: 4em;
  display: flex;
  flex-direction: column;
  border: 5px solid #fefefe;
  border-top: none;
  border-bottom: none;
  position: relative;
  color: #fff;
}
.testimonial:before, .testimonial:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 36px;
  background-repeat: no-repeat;
}
.testimonial:before {
  top: -10px;
  right: 10%;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141.5 101"><path fill="white" d="m80.817.554c.458-.025.805-.06,1.152-.06,19.188-.003,38.376-.002,57.564-.002.146,0,.291.011.437.011.491,0,.712.16.712.735.002,19.353.023,38.706.044,58.059.004,3.649-.176,7.285-.832,10.88-.796,4.361-2.397,8.442-4.643,12.241-.975,1.648-2.273,3.106-3.446,4.634-.443.577-.922,1.132-1.426,1.656-1.938,2.015-4.045,3.838-6.374,5.39-3.972,2.648-8.297,4.499-12.973,5.438-2.052.412-4.157.674-6.247.751-4.326.159-8.659.151-12.989.203-.286.003-.572-.07-.917-.115v-19.877c.267,0,.491,0,.714,0,3.833,0,7.667,0,11.5,0,3.384,0,6.55-.847,9.48-2.521,2.537-1.449,4.398-3.513,5.825-6.094,1.849-3.345,2.325-6.94,2.49-10.641.008-.186-.014-.374-.029-.56-.003-.037-.035-.071-.096-.186-.223,0-.488,0-.752,0-12.625,0-25.25,0-37.875,0-.208,0-.42-.027-.624.001-.519.072-.637-.184-.638-.649-.012-3.333-.06-6.666-.061-9.999-.005-15.395.002-30.791.004-46.186,0-1.017,0-2.034,0-3.111Z" /><path  fill="white" d="m10.837,80.498c.303,0,.528,0,.752,0,3.813,0,7.626,0,11.438,0,3.785,0,7.275-1.023,10.442-3.086,2.062-1.343,3.688-3.097,4.776-5.331.269-.552.664-1.042.952-1.586.16-.303.213-.663.323-.994.875-2.647,1.304-5.368,1.354-8.152.003-.187-.008-.375-.019-.562-.003-.06-.027-.119-.059-.254-.244-.011-.505-.034-.765-.034-12.605-.002-25.211-.001-37.816-.002-1.322,0-1.338,0-1.339-1.309-.008-16.417-.011-32.833-.014-49.25,0-2.917.01-5.833-.01-8.75-.003-.473.123-.708.617-.686.249.011.5-.01.75-.01,19.023,0,38.045,0,57.068,0,1.348,0,1.361,0,1.362,1.331.018,19.48.039,38.959.042,58.439,0,4.404-.376,8.765-1.546,13.04-.769,2.809-1.905,5.456-3.306,7.988-.679,1.227-1.481,2.395-2.32,3.52-1.017,1.364-2.061,2.721-3.223,3.96-1.867,1.992-3.953,3.752-6.226,5.276-4.003,2.682-8.364,4.559-13.084,5.497-2.174.432-4.407.686-6.623.766-4.348.158-8.702.133-13.053.197-.476.007-.478-.262-.48-.6-.013-2.166-.05-4.333-.046-6.499.006-4.125.034-8.25.053-12.375,0-.144,0-.288,0-.534Z" /></svg>');
}
.testimonial:after {
  bottom: -10px;
  left: 30%;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142.5 102"><path fill="white" d="m21.67,40.996c.335,0,.603,0,.871,0,12.729,0,25.459,0,38.188,0,.921,0,.926.004.926.899.015,18.541.031,37.081.042,55.622,0,.979-.041,1.958-.042,2.937,0,.396-.145.583-.554.545-.186-.017-.375-.002-.562-.002-19.271,0-38.542,0-57.813,0-.867,0-.877,0-.887-.881-.026-2.354-.06-4.707-.06-7.061-.005-17.395-.003-34.79-.002-52.185,0-3.335.114-6.66.825-9.937.508-2.34,1.145-4.638,2.073-6.849.447-1.066.846-2.16,1.395-3.173.648-1.195,1.37-2.364,2.178-3.457,1.149-1.555,2.324-3.106,3.633-4.524,2.381-2.579,5.085-4.787,8.126-6.57,4.232-2.481,8.771-4.108,13.623-4.789,2.201-.309,4.432-.497,6.654-.554,3.498-.09,6.999-.025,10.5-.023.862,0,.87.007.87.837,0,6.187-.009,12.374.003,18.56,0,.484-.177.598-.621.597-3.958-.009-7.917-.039-11.875.017-1.828.026-3.624.311-5.406.83-2.391.695-4.464,1.843-6.339,3.468-2.378,2.061-3.955,4.581-4.83,7.588-.729,2.504-1.009,5.052-.945,7.649.003.121.016.242.03.457Z" /><path fill="white" d="m101.501,41.049h40.222c0,1.057,0,2.01,0,2.963,0,17.791.003,35.581,0,53.372,0,1-.046,1.999-.039,2.999.003.449-.137.67-.611.617-.185-.021-.375-.002-.562-.002-19.167,0-38.333,0-57.5-.001-1.292,0-1.124.136-1.14-1.139-.036-2.77-.055-5.541-.056-8.311-.005-16.582-.009-33.165.005-49.747.002-2.29-.017-4.592.201-6.866.192-1.998.61-3.989,1.102-5.939.476-1.885,1.095-3.744,1.801-5.556.471-1.209,1.203-2.317,1.819-3.47.059-.11.129-.214.19-.323,2.575-4.597,6.106-8.327,10.329-11.44,5.251-3.871,11.178-5.995,17.603-6.812,4.082-.52,8.19-.405,12.293-.4,1.292.002,2.584.029,3.875-.004.512-.013.636.176.636.647,0,2.75.038,5.499.036,8.249-.002,3.458-.042,6.916-.036,10.374,0,.568-.158.747-.741.743-3.667-.025-7.333-.017-11-.011-2.28.004-4.493.331-6.691,1.012-2.162.67-3.995,1.786-5.707,3.217-3.207,2.68-4.893,6.169-5.496,10.22-.268,1.8-.35,3.627-.533,5.609Z" /></svg>');
}
.testimonial * {
  text-align: center;
}
.testimonial h1 {
  text-transform: uppercase;
  line-height: 1.25;
  font-size: 4.5rem;
  font-family: "Raleway", sans-serif;
  letter-spacing: 2px;
}
.testimonial p {
  font-size: 1.25em;
  line-height: 1.75;
  font-family: "Monserrat", sans-serif;
}
.testimonial p.source {
  font-style: italic;
}
.testimonial .border {
  height: 5px;
  width: 100%;
  position: absolute;
  left: 0;
}
.testimonial .border.top {
  top: 0;
}
.testimonial .border.top:before, .testimonial .border.top:after {
  content: "";
  position: absolute;
  background: #fff;
  z-index: 10;
  height: 5px;
}
.testimonial .border.top:before {
  width: 75%;
  left: 0;
}
.testimonial .border.top:after {
  width: 5%;
  right: 0;
}
.testimonial .border.bottom {
  bottom: 0;
}
.testimonial .border.bottom:before, .testimonial .border.bottom:after {
  content: "";
  position: absolute;
  background: #fff;
  z-index: 10;
  height: 5px;
}
.testimonial .border.bottom:before {
  width: 25%;
  left: 0;
}
.testimonial .border.bottom:after {
  width: 55%;
  right: 0;
}/*# sourceMappingURL=style.css.map */