* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #000000;
}

header {
  width: 100%;
  height: 76px;
  font-family: "Inter", sans-serif;
}

/*Navbar Section Start*/
.navbar {
  width: 90%;
  max-width: 1440px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  color: #e9e9e9;
  font-size: 15px;
  border-bottom: 1px solid #353535;
}

.navbar_items {
  display: flex;
  align-items: center;
  gap: 25px;
}

.navbar_items_list {
  display: flex;
  list-style-type: none;
  gap: 40px;
}
.navbar_category_link {
  color: #e9e9e9;
  text-decoration: none;
}
.navbar_category_link:hover {
  color: rgb(203, 193, 193);
}
.navbar_buttons {
  display: flex;
  gap: 25px;
  align-items: center;
}

.navbar_login_button {
  color: #e9e9e9;
  padding: 8px 20px;
  border-radius: 12px;
  background-color: #0a0a0ab2;
  border: 1px solid #353535;
  text-decoration: none;
}

.navbar_subscribe_button {
  padding: 8px 22px;
  border-radius: 12px;
  background-color: #ffee00;
  color: #000000;
  display: flex;
  gap: 8px;
  font-weight: bold;
  align-items: center;
  text-decoration: none;
}
.navbar_subscribe_button_arrow {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  background-color: #ffee00;
}
@media (max-width: 950px) {
  .navbar_items_list {
    display: none;
  }
}
/*Navbar Section End*/


/*Hero Section Start*/

.hero-section {
  max-width: 1440px;
  margin: 40px auto;
  padding: 0 80px;
  display: flex;
  flex-direction: column;
  font-family: "Inter", sans-serif;
  background-color: #000;
  gap: 20px;
}

.hero-section .hero-container {
  display: flex;
  gap: 20px; 
}

  .hero-section .containers {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.hero-section .hero-title {
  font-size: 75px;
  line-height: 1.2; 
  font-family: "Inter", sans-serif;
  color: white;
  margin-bottom: 20px;
  display:block;
}

.hero-section .hero-title span {
  color: yellow;
  font-weight: 800;
  
}

.hero-section .left-container {
display:flex;
align-items: center; 
gap: 20px; 
}

.hero-section .left-container img {
border-radius: 10px;
}

.hero-section .right-container {
display: flex;
flex-direction: column;
align-items: flex-start;
} 

.hero-section .right-container .text {
width:400px;
color:#E9E9E9;
margin-bottom: 20px;
font-weight: 500;
font-size: 18px;
}

.hero-section .cta {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 15px; 
}

.hero-section .cta-btn-1 {
  display: flex;
  align-items: center;
background-color: yellow;
color: black;
padding: 11px 30px;
border-radius: 15px;
display: flex;
align-items: center;
gap:10px;
font-weight: 700;
font-size:23px;
}

.hero-section .cta-btn-2 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  border-radius: 15px;
  padding: 11px 30px;
  font-size: 22px;
  font-weight: 500;
  border: 1px solid #353535;
}

.hero-section blockquote {
max-width: 400px; 
font-family: "Inter";
font-style: normal;
color: white;
}

.hero-section cite {
display: block;
font-family: "Inter";
font-style: normal;
margin-top: 10px;
color:#8C8C8C;
}

/*Responsive */
@media (max-width:1096px) {
  .hero-section .hero-title {
    font-size: 60px;
  }
  .hero-section .hero-title br {
    display: none;
  }
  .hero-section .containers {
    flex-direction: column-reverse;
    gap: 40px;
  }
  .hero-section .right-container {
    align-items: center;
  }
  .hero-section .right-container .text {
    width: 100%;
  }
  .hero-section .hero-container {
    justify-content:center ;
  }
}
@media (max-width:800px) {
  .hero-section .hero-title {
    font-size: 46px;
  }
  .hero-section {
    padding: 0 20px;
  }
  .hero-section .right-container .text {
    width: 80%;
  }
  .hero-section .hero-container {
    justify-content:center ;
  }
}
@media (max-width:600px) {
  .hero-section .hero-title {
    font-size: 36px;
  }
  .hero-section .hero-container {
    align-items: center;
    justify-content: center;
  }
  .hero-section .left-container {
    width: 80%;
  }
  .hero-section .cta-btn-1,
  .hero-section .cta-btn-2 {
    font-size: 14px;
  }
  .hero-section blockquote {
    font-size: 14px;
  }
  .hero-section .right-container .text {
    width: 70%;
  }
  .hero-section .left-container img {
    width: 60px;
  }
}
@media (max-width:430px) {
  .hero-section .hero-title {
    font-size: 28px;
  }
  .hero-section .right-container .text{
    width: 90%;
  }
  .hero-section .cta-btn-1,
  .hero-section .cta-btn-2 {
   padding: 10px 20px;
  }
}

/*Hero Section End*/

/* Yaren - [FE-2] - Partners Section Start */

.partners-section {
  width: 90%;
  max-width: 1440px;
  margin: 20px auto;
  font-family: "Inter", sans-serif;
}

.mobile-text-content {
  display: none;
}

.partners-texts {
  display: flex;
  width: 100%;
  height: auto;
  justify-content: space-between;
  flex-wrap: wrap;
}

.partners-text1,
.partners-text2 {
  font-family: Inter;
  font-weight: 500;
  font-size: 23.44px;
  line-height: 28px;
  letter-spacing: -1.25px;
}

.partners-text1 {
  color: #e9e9e9;
}

.partners-text2 {
  color: #ffee00;
}

.partners-text3 {
  font-family: Inter;
  font-weight: 500;
  font-size: 15px;
  line-height: 20.24px;
  letter-spacing: -0.8px;
  color: #8c8c8c;
}

.partners-logos {
  display: grid;
  width: 100%;
  height: auto;
  grid-template-columns: repeat(7, 1fr);
  gap: 40px;
  align-items: center;
  margin-top: 50px;
  overflow-x: auto;
}

.partners-logos img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 1200px) {
  .partners-logos {
    grid-template-columns: repeat(6, 1fr);
  }

  .partners-logos img:nth-child(7) {
    display: none;
  }
}

@media (max-width: 950px) {
  .partners-logos {
    grid-template-columns: repeat(5, 1fr);
  }

  .partners-logos img:nth-child(6) {
    display: none;
  }

  .partners-texts {
    align-items: center;
    flex-direction: column;
    gap: 15px;
  }

  .mobile-text-content {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 200px;
    justify-content: space-between;
    color: #8c8c8c;
    font-size: 11px;
    font-weight: 500;
  }

  .partners-text3 {
    display: none;
  }
}

@media (max-width: 768px) {
  .partners-logos {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }

  .partners-logos img:nth-child(5) {
    display: none;
  }

  .partners-text1,
  .partners-text2 {
    font-size: 15px;
    line-height: 24px;
  }
}

@media (max-width: 576px) {
  .partners-section {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .partners-logos {
    margin-top: 30px;
    gap: 20px;
  }
}

/* Yaren - [FE-2] - Partners Section End */

/*Carousel Section Start*/
.carousel-section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 20px auto;
}
.carousel-container {
  display: flex;
  gap: 30px;
  max-width: 100%;
  padding: 50px;
}
.carousel-img {
  border-radius: 15px;
}
.carousel-img img {
  max-width: 100%;
}
@media (max-width: 700px) {
  .carousel-img:nth-child(2) {
    display: none;
  }
}
/*Carousel Section End*/

/* Journey Section Start*/
.design-journey {
  display: flex;
  font-family: "Inter", sans-serif;
  justify-content: center;
  gap: 10px;
  align-items: center;
  width: 100%;
  max-width: 1440px;
  margin: auto;
  padding: 50px 20px;
  background-color: #000;
}
.journey-container-left {
  display: flex;
  width: 100%;
  flex-direction: column;
  max-width: 500px;
  color: #e9e9e9;
}
.framer-steps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.icon {
  margin-bottom: 10px;
}
.framer-title {
  font-weight: 700;
  font-size: 45px;
  line-height: 60px;
  margin-bottom: 40px;
}
.highlight {
  color: #ffee00;
}
.journey-card {
  display: flex;
  align-items: center;
  gap: 15px;
  max-width: 500px;
  padding: 15px 20px;
}
.card-p {
  font-size: 20px;
  line-height: 25px;
}
.bg-linear-gr {
  background: linear-gradient(
    102.49deg,
    rgba(34, 34, 34, 0.3) 0%,
    rgba(26, 26, 26, 0.3) 42.71%,
    rgba(49, 49, 49, 0.3) 79.17%,
    rgba(53, 53, 53, 0.3) 100%
  );
  border: 1px solid #1e1e1e;
  border-radius: 15px;
}
.journey-container-right {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.journey-img {
  height: auto;
  border-radius: 15px;
  max-width: 100%;
}
@media (max-width: 950px) {
  .design-journey {
    flex-direction: column-reverse;
    align-items: center;
    width: 100%;
  }
  .journey-container-left {
    margin-top: 50px;
    max-width: 100%;
    width: 100%;
    align-items: center;
  }
  .journey-card {
    max-width: 100%;
  }
  .journey-img {
    max-width: 100%;
  }
  .highlight {
    display: block;
  }
  .framer-title {
    font-size: 32px;
  }
  .card-p {
    font-size: 14px;
  }
}
@media (max-width: 1100px) {
  .framer-title {
    font-size: 36px;
  }
  .card-p {
    font-size: 18px;
  }
}
@media (max-width: 650px) {
  .journey-img {
    max-width: 100%;
  }
}
/* Journey Section End*/

/*Artone Section Start*/
.artone-logo-section {
  margin: 20px 0;
}
.artone-logo-container {
  max-width: 1440px;
  display: flex;
  margin: 0 auto;
}
.artone-logo-wrapper {
  width: 100%;
  height: 284px;
}
/*Artone Section End*/

/*Yaren - Pricing Section Start*/

.pricing-section {
  width: 100%;
  max-width: 1440px;
  margin: 30px auto;
  font-family: "Inter",sans-serif;
  display: flex;
  flex-direction: column;
  padding: 30px;
}
.price-big-container {
    display: flex;
    margin-top: 50px;
    gap: 50px;
  }

.pricing-text-container {
  max-width: 437px;
}
.pricing-texts {
  font-weight: 700;
  font-size: 45px;
  line-height: 57.24px;
  letter-spacing: -2.4px;
  color:#FFFFFF
}
.pricing-yellow-text {
  color: #FFEE00;
}
.pricing-left-container {
  width: 627px;
  height: 664px;
  border-radius: 15px;
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(207.12deg,
  rgba(31, 31, 31, 0.4) 0%,
  rgba(44, 44, 44, 0.4) 20.31%,
  rgba(43, 43, 43, 0.4) 23.8%,
  rgba(14, 14, 14, 0.4) 62.34%),
  url("../images/pricing-section/price-background.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  }
  .pricing-left-container-int {
    width: 431px;
    padding-top: 49px;
    padding-left: 44px;
  }
  .spots-container {
    width: 145px;
    height: 44px;
    border-radius: 50px;
    background-color: #0E0E0E4D;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 15px;
    margin-bottom: 40px;
  }
  .spots-light {
    width: 10px;
    height: 10px;
    top: 17.11px;
    left: 27px;
    border-radius: 10px;
    background-color: #FFEE00;
  }
  .spots-text {
    font-weight: 500;
    font-size: 14.5px;
    line-height: 20.24px;
    letter-spacing: -0.8px;
    color: #E9E9E9;
  }
  .price-container {
    width: 180px;
    height: 102px;
    top: -0.19px;
    font-weight: 700;
    font-size: 36.88px;
    line-height: 52.2px;
    letter-spacing: -2px;
    color:#FFEE00;
  }
  .price-white-text {
    color:#E9E9E9;
  }
  .price-mini-text {
    font-weight: 500;
    font-size: 23.24px;
    line-height: 28px;
    letter-spacing: -1.25px;
    color:#E9E9E9;
  }
  .price-basic-text {
    width: 270px;
    font-weight: 500;
    font-size: 18.91px;
    line-height: 24.2px;
    letter-spacing: -1px;
    color:#E9E9E9;
    margin-top: 50px;
    margin-bottom: 30px;
  }
  .pricing-buttons {
    margin-top: 50px;
    margin-bottom: 50px;
  }
  .pricing-subscribe-button {
    width: 172px;
    height: 49px;
    border-radius: 15px;
    background-color: #FFEE00;
    margin-right: 10px;
  }
  .pricing-bookacall-button {
    width: 148px;
    height: 49px;
    border-radius: 15px;
    background: linear-gradient(106.51deg, rgba(43, 43, 43, 0.3) 0%, rgba(14, 14, 14, 0.3) 65.63%);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  .subscribe-text {
    font-weight: 700;
    font-size: 18.28px;
    line-height: 20.2px;
    letter-spacing: -1px;
    background-color: #FFEE00;
  }
  .bookacall-text {
    color: #E9E9E9;
    font-weight: 500;
    font-size: 18.91px;
    line-height: 24.2px;
    letter-spacing: -1px;
}
  .price-list-big-container {
    display: flex;
    gap: 25px;
  }
  .price-list-left li, .price-list-right li{
    list-style: none;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -1px;
    color: #8C8C8C;
  }

.pricing-right-top-container {
  width: 628px;
  border-radius: 15px;
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(226.78deg, rgba(31, 31, 31, 0.4) 0%, rgba(44, 44, 44, 0.4) 20.31%, rgba(43, 43, 43, 0.4) 23.8%, rgba(14, 14, 14, 0.4) 62.34%) ;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.pricing-right-top-container-int {
  width: 530px;
  margin: 52px 44px;
}
.price-custom-text {
  font-weight: 700;
  font-size: 37.03px;
  line-height: 52.2px;
  letter-spacing: -2px;
  color: #FFEE00;
}
.price-right-basic-text {
  width: 270px;
  height: 49px;
  font-weight: 500;
  font-size: 18.59px;
  line-height: 24.2px;
  letter-spacing: -1px;
  color: #E9E9E9;
  margin-top: 30px;
  margin-bottom: 30px;
}
.right-container-button-list {
  display: flex;
}
.right-list-container {
  list-style: none;
  width: 149px;
  font-weight: 500;
  font-size: 16px;
  line-height: 24.2px;
  letter-spacing: -1px;
  color: #8C8C8C;
  margin-left: 20px;
}
.pricing-right-bottom-container {
  width: 628px;
  border-radius: 15px;
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(226.78deg, rgba(31, 31, 31, 0.4) 0%, rgba(44, 44, 44, 0.4) 20.31%, rgba(43, 43, 43, 0.4) 23.8%, rgba(14, 14, 14, 0.4) 62.34%),
  url("./images/pricing-backgrounds/price-background.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.pricing-right-bottom-container-int {
  margin: 32px 44px;
}
.add-on-button {
  width: 104px;
  height: 44px;
  border-radius: 50px;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 20px;
}
.add-on-text {
  font-weight: 500;
  font-size: 15px;
  line-height: 20.24px;
  letter-spacing: -0.8px;
  color:#E9E9E9;
}
.pricing-right-containers {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: space-between;
}
.framer-development {
  font-weight: 700;
  font-size: 37.81px;
  line-height: 52.2px;
  letter-spacing: -2px;
  color: #FFEE00;
  width: 352px;
  margin-bottom: 30px;
}
.framer-white-text {
  color: #E9E9E9;
}
.framer-button-text {
  display: flex;
  gap: 15px;
}
.framer-p-text {
  font-size: 18px;
  line-height: 24.2px;
  letter-spacing: -1px;
  color: #E9E9E9;
  width: 305px;
}


@media (max-width: 1200px) {

  .pricing-section {
    align-items: center;
  }


  .price-big-container {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .pricing-right-containers {
    width: 100%;
    max-width: 627px;
  }

  .pricing-right-top-container,
  .pricing-right-bottom-container {
    width: 100%;
  }

  .pricing-text-container {
    max-width: 100%;
  }
}

@media (max-width: 950px) {
  .pricing-section {
    width: 90%;
  }
}

@media (max-width: 700px) {
  .pricing-section {
    width: 90%;
  }

  .pricing-text-container {
    width: 100%;
  }

  .pricing-texts {
    font-size: 36px;
    line-height: 45px;
  }

  .pricing-left-container,
  .pricing-right-top-container,
  .pricing-right-bottom-container {
    width: 100%;
    height: auto;
    padding-bottom: 30px;
  }

  .pricing-left-container-int,
  .pricing-right-top-container-int,
  .pricing-right-bottom-container-int {
    width: auto;
    max-width: 90%;
    margin: 0 auto;
    padding: 30px 20px;
  }

  .price-list-big-container {
    flex-direction: column;
    gap: 15px;
  }

  .price-list-container, 
  .price-list-left,
  .price-list-right {
    width: 100%;
  }

  .pricing-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .pricing-subscribe-button,
  .pricing-bookacall-button {
    width: 100%;
    margin-right: 0;
    text-align: center;
  }

  .subscribe-text,
  .bookacall-text {
    width: 100%;
    display: inline-block;
    text-align: center;
  }

  .right-container-button-list {
    flex-direction: column;
    gap: 20px;
  }

  .right-list-container {
    width: auto;
    margin-left: 0;
  }

  .framer-button-text {
    flex-direction: column;
  }

  .framer-p-text {
    width: 100%;
  }

  .price-basic-text,
  .price-right-basic-text,
  .framer-development {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .pricing-section {
    width: 90%;
    padding: 0;
  }

  .pricing-texts {
    font-size: 28px;
    line-height: 35px;
    letter-spacing: -1.5px;
  }

  .price-container,
  .price-custom-text,
  .framer-development {
    font-size: 28px;
    line-height: 35px;
    letter-spacing: -1.5px;
  }

  .price-basic-text,
  .price-right-basic-text {
    font-size: 16px;
    line-height: 20px;
  }

  .pricing-left-container-int,
  .pricing-right-top-container-int,
  .pricing-right-bottom-container-int {
    padding: 20px 15px;
  }

  .spots-container {
    width: 140px;
    height: 36px;
  }

  .spots-text {
    font-size: 13px;
  }
}

/*Yaren - Pricing Section End*/

/*Features Section Start*/
.features-section {
  font-family: "Inter", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}
.features-container {
  display: flex;
  flex-direction: column;
  gap: 50px;
  max-width: 1440px;
  width: 100%;
}
.feature-text-p {
  font-weight: 700;
  font-size: 45px;
  letter-spacing: -2px;
  color: #e9e9e9;
}
.feature-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.feature-box {
  border-radius: 15px;
  border: 1px solid #1e1e1e;
  padding: 40px;
  min-height: 410px;
  display: flex;
  align-items: flex-end;
  flex: 1;
  background: linear-gradient(
    110.94deg,
    rgba(31, 31, 31, 0.35) 3.88%,
    rgba(44, 44, 44, 0.35) 23.02%,
    rgba(43, 43, 43, 0.35) 36.05%,
    rgba(14, 14, 14, 0.35) 76.1%
  );
  position: relative;
  overflow: hidden;
}
.feature-row {
  display: flex;
  align-items: stretch;
  gap: 15px;
}
.feature-card-1,
.feature-card-3 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 20px;
  max-width: 35%;
  position: relative;
}
.feature-card-3 {
  min-width: 55%;
  background: linear-gradient(
      106.66deg,
      rgba(31, 31, 31, 0.35) 3.88%,
      rgba(44, 44, 44, 0.35) 23.02%,
      rgba(43, 43, 43, 0.35) 36.83%,
      rgba(14, 14, 14, 0.35) 76.1%
    ),
    url(../images/features-images/feature-card3-background.svg);
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: -1;
}
.feature-highlight {
  color: #ffee00;
}
.feature-card1-title {
  color: #ffee00;
  font-size: 155px;
  font-weight: 700;
  letter-spacing: -7px;
  line-height: normal;
  margin: auto;
  width: 100%;
  display: flex;
  justify-content: center;
}
.feature-card1-text {
  color: #8c8c8c;
  font-size: 18px;
  margin: 12px 40px;
  letter-spacing: -1px;
}
.feature-card-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 75%;
  position: relative;
}
.feature-card2-background {
  background-image: url("../images/features-images/feature-card2-background.svg");
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.feature-card2-icons {
  margin-top: 30px;
  display: inline-block;
}
.feature-card2-symbols img {
  margin-right: 50px;
}
.feature-card2-symbols {
  margin-left: 30px;
}
.feature-card2-you {
  display: inline-block;
  position: absolute;
  bottom: 120px;
  left: clamp(225px, 30vw, 420px);
}
.feature-card2-ravzan {
  display: inline-block;
  position: absolute;
  right: 200px;
  bottom: 65px;
}
.feature-card-article {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 45%;
}
.feature-card-1 .feature-card-article {
  width: 80%;
}
.feature-card-2 .feature-card-article {
  width: 50%;
  margin-top: 40px;
}
.feature-card-subtitle {
  font-weight: bold;
  color: #e9e9e9;
  font-weight: 700;
  font-size: 23.05px;
  line-height: 28px;
  letter-spacing: -1.25px;
}
.feature-card-text {
  color: #8c8c8c;
  font-size: 18px;
  letter-spacing: -1px;
  font-weight: 500;
  line-height: 24.2px;
  letter-spacing: -1px;
}
.feature-card3-img {
  position: absolute;
  bottom: 0;
  right: 40px;
  z-index: -1;
}
.feature-card4-bg {
  position: absolute;
  top: 0;
  right: 20px;
  z-index: -1;
}
.feature-card4-pause {
  color: white;
  background: linear-gradient(110.56deg, #191919 0%, #0e0e0e 65.62%);
  font-weight: 700;
  font-size: 38px;
  line-height: 46px;
  letter-spacing: -2px;
  position: absolute;
  top: 65px;
  right: 190px;
  border-radius: 30px;
  padding: 25px 55px;
  border: 3px solid #1e1e1e;
}
.feature-card-4 .feature-card-article {
  width: 50%;
}
.feature-card4-you-bubble {
  position: absolute;
  right: 120px;
  bottom: 135px;
}
.features-chats {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.feature-chat1 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.feature-chat-message {
  color: #8c8c8c;
  font-weight: 500;
  font-size: 16px;
  line-height: 24.2px;
  letter-spacing: -1px;
  border: 2px solid #ffffff14;
  border-radius: 8px 8px 8px 0px;
  width: fit-content;
  padding: 20px 15px 0;
}
.feature-chat2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.feature-card5-chat2 {
  color: #8c8c8c;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -1px;
  border: 2px solid #ffffff14;
  padding: 20px 5px 0.5px 10px;
  margin-left: 32px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  width: 270px;
  height: 45px;
  margin-top: 42px;
}
.feature-card5-avatar-b img {
  margin-left: 30px;
  width: 25px;
  margin-top: 7px;
}
.feature-card-6 {
  width: 36%;
}
.feature-card6-bg {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
.feature-card6-bg-y {
  position: absolute;
  top: 0;
  right: -6px;
  z-index: -1;
}
.feature-card7-blur {
  width: 100%;
  height: 70%;
  position: absolute;
  bottom: -65px;
  left: 50px;
  right: 0;
  filter: blur(25px);
  background: linear-gradient(183.18deg, #030303 0%, #111111 100%);
  z-index: -1;
}
.feature-card7-bg1 {
  position: absolute;
  top: 15px;
  left: -10px;
  width: 50%;
  z-index: -1;
}
.feature-card7-bg2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  z-index: -1;
}
.feature-card7-bg3 {
  position: absolute;
  right: 0;
  top: 120px;
  z-index: -1;
  width: 50%;
}
@media (max-width: 1265px) {
  .feature-card-text {
    font-size: 16px;
    line-height: 22px;
  }
  .feature-card2-ravzan {
    right: 90px;
  }
  .feature-card2-you {
    right: 30%;
  }
}
@media (max-width: 992px) {
  .feature-box {
    min-height: 380px;
  }
  .feature-row {
    flex-direction: column;
    align-items: center;
  }
  .feature-box,
  .feature-card-1,
  .feature-card-2,
  .feature-card-3 {
    min-width: unset;
    max-width: unset;
    width: 100%;
  }
}
@media (max-width: 768px) {
  .feature-text-p {
    font-size: 32px;
    line-height: 32px;
    text-align: center;
    min-width: 100%;
  }
  .feature-card-article {
    width: 50%;
  }
  .feature-card-3 .feature-card-article,
  .feature-card-4 .feature-card-article {
    width: 75%;
  }
  .feature-card-subtitle {
    font-size: 18px;
  }
  .feature-card-text {
    font-size: 14px;
  }
  .feature-card3-img,
  .feature-card4-bg,
  .feature-card4-you-bubble,
  .feature-card6-bg-y,
  .feature-card6-bg {
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
  }
  .feature-card6-bg-y {
    top: 53%;
  }
  .feature-card4-bg {
    top: 40%;
  }
  .feature-card4-pause {
    z-index: -1;
    top: 15%;
    right: 34.5%;
  }
  .feature-card4-you-bubble {
    left: 70%;
    width: 90px;
    z-index: -1;
  }
  .feature-card2-ravzan {
    display: none;
  }
}
@media (max-width: 576px) {
  .feature-card .feature-card-article {
    width: 75%;
  }
  .feature-card1-title {
    font-size: 120px;
  }
  .feature-card4-pause {
    right: 27%;
  }
}
/*Features Section End*/

/* Benefit Start */
.benefits-section {
  margin: 0 auto;
  font-family: "Inter", sans-serif;
}
.benefits-container {
  width: 90%;
  max-width: 1280px;
  background: linear-gradient(
    110.94deg,
    rgba(31, 31, 31, 0.4) 18.07%,
    rgba(44, 44, 44, 0.4) 37.31%,
    rgba(43, 43, 43, 0.4) 40.55%,
    rgba(14, 14, 14, 0.4) 75.52%
  );
  border-radius: 50px;
  border: 1px solid #333;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  max-width: 1280px;
  padding: 100px;
  margin: 50px auto;
}
.benefit-card {
  padding: 30px;
  background: transparent;
}
.icon-wrapper {
  margin-bottom: 30px;
}
.benefit-title {
  font-size: 18.44px;
  color: #e9e9e9;
  margin-bottom: 12px;
}
.benefit-exp {
  font-size: 18.44px;
  color: #8c8c8c;
  margin-bottom: 12px;
}
@media (max-width: 500px) {
  .benefits-container {
    display: grid;
    place-items: center;
    padding: 0px;
  }
}
/* Benefit End */

/* faq section css start */

.faq-section-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 690px;
  width: 100%;
  padding: 30px;
  }
.faq-section {
  width: 100%;
  max-width: 1440px;
  margin: 20px auto;
  display: flex;
  justify-content: center;
  font-family: "Inter", sans-serif;
}
.faq-content {
  
  display: flex;
  color: #e9e9e9;
  justify-content: space-between;
  align-items: center;
  padding: 35px 40px;
  border-radius: 10px;
  border: 1px #1e1e1e solid;
  font-size: 24px;
  font-weight: 500;
  background: linear-gradient(
    255.66deg,
    rgba(27, 27, 27, 0.4) 0%,
    rgba(19, 19, 19, 0.4) 60.42%,
    rgba(17, 17, 17, 0.4) 100%
  );
  width: 100%;
  height: 100%;
}
.faq-content img {
  width: 20px;
  height: 13px;
}

@media (max-width: 610px) {
  .faq-content {
    font-size: 20px;
  }
}

@media (max-width: 470px) {
  .faq-content {
    font-size: 16px;
  }
}

/* faq section css end */
/* Solution-Section-Start */
.solution-section {
  margin: 40px;
  font-family: 'Inter',sans-serif;
}
.solution-section .solution-container {
  display: flex;
  flex-direction: column;
  gap: 50px;
  width: 100%;
  max-width: 1440px;
  margin: auto;
}
.solution-section .title-container {
  display: flex;
  color:#FFFFFF;
  font-size: 45px;
  font-weight: 700;
}
.solution-section .title-container .title{
  color: #ffee00;
}
.solution-section .solution-framner {
  background-color: #080808;
  border-radius: 15px;
  border: 1px solid #1E1E1E;
  padding: 20px 30px;
}
.solution-section .solution-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  padding: 10px 10px;
  color: #E9E9E9;
}
.solution-section .solution-card {
  background: linear-gradient(110.01deg, rgba(34, 34, 34, 0.3) 0%, rgba(26, 26, 26, 0.3) 42.71%, rgba(49, 49, 49, 0.3) 79.17%, rgba(53, 53, 53, 0.3) 100%);
  display: flex;
  gap: 10px;
  padding: 15px 27px;
  border-radius: 20px;
  border: 1px solid #1E1E1E;
  color: #E9E9E9;
  align-items: center;
  font-size: 24px;
  font-weight: 700;
}
.solution-section .solution-card p{
  font-size: 24px;
  font-weight: 700;
}
@media (max-width: 800px) {
  .solution-section .solution-wrapper {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .solution-section .solution-card {
    font-size: 18px;
    padding: 12px 20px;
  }
  .solution-section .title-container {
    font-size: 35px;
  }
  .solution-section .solution-card p {
    font-size: 18px;
  }
}
@media (max-width: 570px) {
  .solution-section .solution-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
  .solution-section .solution-framner {
    padding: 0;
  }
  .solution-section .title-container {
    font-size: 30px;
  }
  .solution-section .solution-card {
    font-size: 14px;
    padding: 5px;
  }
  .solution-section .solution-card img {
    width: 38px;
  }
  .solution-section .solution-card p {
    font-size: 16px;
  }
}
@media (max-width: 400px) {
  .solution-section .solution-card p {
    font-size: 14px;
  }
}
/* Solution-Section-End */

.footer {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.footer .footer-container {
  background: linear-gradient(180deg, rgba(27, 27, 27, 0.4) 0%, rgba(19, 19, 19, 0.4) 21.87%, rgba(17, 17, 17, 0.4) 100%);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  font-family:"Inter" ,sans-serif;
  align-items: flex-start;
  gap: 40px;
  max-width: 1740px;
  border-radius: 20px;
  margin: 30px;
  padding: 40px;
}
.footer .footer-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 200px;
  min-width: 0;
  color:#8C8C8C;
  padding: 20px;
}

.footer img {
  width: 18px;
}

 .footer h4 {
  margin-bottom: 20px;
  font-size: 16px;
  color:white;
}

.footer .footer-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none;
  padding-left: 0;
 
}
.footer .list-element a{
  color: #8C8C8C;
  text-decoration: none;
}

.footer .footer-button {
  padding: 8px;
  border-radius: 30px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  background: linear-gradient(105.9deg, rgba(43, 43, 43, 0.3) 0%, rgba(14, 14, 14, 0.3) 65.62%);
  border: 1px solid #353535;
  color: #E9E9E9;
}
.footer .primary-btn {
background: #FFEE00;
  color: black;

}

@media screen and (max-width: 1024px) {
  .footer .footer-container {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
  }
}
@media screen and (max-width:700px) {
  .footer .footer-container {
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    padding: 0;
  }
}
@media screen and (max-width:400px) {
   .footer .footer-container {
    grid-template-columns: repeat(1, 1fr);
    padding: 0;
  }
}

/* Footer Section End */