:root {
  --color-1: white;
  --text-color: #e6af2e;
  --accent-color: #f4ead2;
}

.nav-item {
  color: #e6af2e;
  margin-right: 20px !important;
}
.nav-item.nav-link.link-hover:hover {
  background-color: #f4ead2;
  color: #e6af2e;
  border-radius: 10px !important;
}
.nav-link:hover{
border-radius: 10px !important;
}
nav a:hover {
 border-radius: 10px !important;
}

/*
.nav-item.nav-link.link-hover.active {
  background-color: #f4ead2;
  color: #e6af2e;
  font-weight: 500;
  border-radius: 10px !important;
}
*/

.navbar-nav .nav-link.active{
   background-color: #f4ead2;
  color: #e6af2e;
  font-weight: 500;
  border-radius: 10px !important;
}
* {
  margin: 0;
  padding: 0;
}
html {
  font-size: 12pt;
  font-family: Poppins, Segoe UI, Tahoma, sans-serif;
}
nav {
  height: 60px;
  background-color: var(--color-1);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.links-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
nav a {
  height: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  text-decoration: none;
  border-bottom: 2px solid #f3f3f3;
  color: var(--text-color);
}
nav a:hover {
  background-color: var(--accent-color);
  color: white;
}
nav .home-link {
  margin-right: auto;
}
nav svg {
  fill: var(--text-color);
}

#sidebar-active {
  display: none;
}

.open-sidebar-button,
.close-sidebar-button {
  display: none;
}

@media (max-width: 1000px) {
  .links-container {
    flex-direction: column;
    align-items: flex-start;

    position: fixed;
    top: 0;
    right: -100%;
    z-index: 10;
    width: 300px;

    background-color: var(--color-1);
    box-shadow: -5px 0 5px rgba(0, 0, 0, 0.25);
    transition: 0.75s ease-out;
  }

  nav a {
    box-sizing: border-box;
    height: auto;
    width: 100%;
    padding: 12px 30px;
    justify-content: flex-start;
  }

  .open-sidebar-button,
  .close-sidebar-button {
    padding: 35px;
    display: block;
  }

  #sidebar-active:checked ~ .links-container {
    right: 0;
  }

  #sidebar-active:checked ~ #overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
  }
}

.btn.login-button {
  background-color: white;
  color: black;
  border: 2px solid rgb(121, 121, 121);

  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  margin-right: 15px;
  border-radius: 10px;
}

.btn.login-button:hover {
  background-color: #ffffff;
  color: black;
  border-color: black;
  border: 2px solid black;
}

.btn.Signup-button {
  background-color: black;
  color: white;
  border: 2px solid black;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  margin-right: 15px;
  border-radius: 10px;
}

.btn.Signup-button:hover {
  background-color: #ffffff;
  color: black;
  border-color: black;
}

.btn.login-button-mobile {
  background-color: white;
  color: black;
  border: 2px solid black;
  /* Adding border for visibility */
  padding: 7px 21px;
  border-radius: 19px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  margin-right: 15px;
}

.btn.login-button-mobile:hover {
  background-color: #ffffff;
  color: black;
  border-color: black;
  opacity: 0.5;
}

.btn.Signup-button-mobile {
  background-color: black;
  color: white;
  border: 2px solid black;
  /* Adding border for visibility */
  padding: 7px 21px;
  border-radius: 19px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  margin-right: 15px;
}

.btn.Signup-button-mobile:hover {
  background-color: #ffffff;
  color: black;
  border-color: black;
}

.button-container {
  display: flex;
  /* Use flexbox layout */
  justify-content: center;
  margin: auto;
  margin-top: auto;
  /* Center align the buttons */
}

.teamCard {
  background: #f2fafe;
  border-radius: 20px !important;
  height: 260px;
  margin-bottom: 36px;
  padding: 20px 20px 25px;
  transition: all 0.25s ease-in-out;
  outline: 1px solid transparent;
  border: 1px solid transparent;
}

.teamCard:hover {
  background: #fff !important;
  border: 1px solid #000;
  outline: 1px solid #000;
  box-shadow: 4px 4px 0 #000;
  transition: all 0.25s ease-in-out;
}

.card-contact {
  height: 100%;
  background: #fff;
  border: 2px solid #000;
  border-radius: 24px;
  padding: 40px 40px 32px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
}

.pricing-table {
  background: #fff;
}
.pricingtable-button a {
  text-decoration: none;
}
.pricingtable {
  text-align: center;
  background: #fff;
  margin: 0;
  box-shadow: 0 0 10px #ababab;
  padding-bottom: 40px;
  border-radius: 10px;
  color: #cad0de;
  transform: scale(1);
  transition: all 0.5s ease 0s;
}
/*.pricingtable:hover {
  transform: scale(1.05);
  z-index: 1;
}*/
.professionBox:hover {
 transform: scale(1.05);
  z-index: 1;
}
.professionBox {
 transform: scale(1.05);
  z-index: 1;
}
.pricingtable .pricingtable-header {
  padding: 40px 0 40px 0;
  background: #F8F3E9;
  border-radius: 10px 10px 50% 50%;
  transition: all 0.5s ease 0s;
}
.pricingtable:hover .pricingtable-header {
/*  background: #D3AD57;*/
background-color: #2d2d2d;
}
.pricingtable .pricingtable-header i {
  font-size: 50px;
  color: #858c9a;
  margin-bottom: 10px;
  transition: all 0.5s ease 0s;
}
.pricingtable .price-value {
  font-size: 35px;
  color: #ff9624;
  transition: all 0.5s ease 0s;
}
.pricingtable .month {
  display: block;
 color: #b7b7b7;
    font-size: 14px;
  transition: all 0.5s ease 0s;
}

.pricingtable:hover .pricingtable-header .heading
{
  color: #fff;
}

.pricingtable:hover .pricingtable-header .heading-2 
{
  color: #fff;
}

.heading-2 
{
  display: block;margin-top: -20px;font-size: 39px;
  color: #e6af2e;
  display: contents;
}


.pricingtable .heading {
/*  font-size: 24px;
  color: #ff9624;
  margin: 20px 0;
  text-transform: uppercase;
  font-weight: bold;*/
        font-size: 25px;

    color: #e6af2e;
    text-transform: uppercase;
}

.pricingtable .pricingtable-content ul {
  list-style-type: none;
  padding: 0;
  margin-bottom: 0px;
}


.pricingtable .pricingtable-content {
 
  margin-top:15px;
}

.pricing-features {
    list-style: none; /* Remove default bullet points */
    padding-left: 0; /* Remove default left padding */
    display: inline-block; /* Make the list take up only the space it needs */
    text-align: left; /* Align list items to the left while keeping the list centered */
}

.pricing-features li {
    display: flex;
    justify-content: flex-start; /* Align content starting from the left */
    align-items: center;
    margin-bottom: 10px; /* Add space between list items */
}

.pricing-features li i {
  color: green;
    min-width: 20px; /* Set a fixed width for the icon to align them vertically */
    margin-right: 10px; /* Add space between the icon and the text */
}

.pricingtable .pricingtable-content ul li {
  line-height: 20px;
  color: grey;
}

.pricingtable .pricingtable-button a {
 margin-top: 10px;
    margin-bottom: 15px;
  display: inline-block;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  padding: 10px 35px;
  border-radius: 10px;
  background: #e6af2e;
  text-transform: capitalize;
  transition: all 0.3s ease 0s;
}
.pricingtable .pricingtable-button a:hover {
  box-shadow: 4px 4px 0 #000;
}

/* ------ Blue color and hover on card -------
------------------------------------------------- */

.pricingtable .professional-header
{
  background-color: #2d2d2d !important;
}


.pricingtable.blue .heading .heading-2,
.pricingtable.blue .price-value .cutprice {
  color:white;
}
/*
.pricingtable.blue .pricingtable-header .cutprice  {
  color: #fff ;
}
*/


.pricingtable:hover .pricingtable-header .cutprice
{
  color: grey !important;
}

.pricingtable.blue .cutprice:hover {
  color: white !important;
}



.pricingtable.blue .pricingtable-button a{
  background-color: #e6af2e;
}


.pricingtable.blue:hover .pricingtable-header {
  background: #e6af2e !important;
}

.pricingtable.blue .pricingtable-button a:hover {
   box-shadow: 4px 4px 0 #000 !important;
}

.professional-price:hover{
  color: white !important;
}
/* ------ Green color and hover on card -------
---------------------------------------------------- */

.pricingtable.green .heading,
.pricingtable.green .price-value {
  color: #40c952;
}
.pricingtable.green:hover .pricingtable-header .price-value {
  color: #fff;
}
.pricingtable.green .pricingtable-button a,
.pricingtable.green:hover .pricingtable-header {
  background: #D3AD57;
}
.pricingtable.green .pricingtable-button a:hover {
  box-shadow: 0 0 10px #40c952;
}

/*----------- after section heading Hr line ----------------
------------------------------------------------------------- */

.text-hr-line::after {
  content: "";
  width: 35%;
  height: 20%;
  margin: auto;
  display: block;
  margin-bottom: 10px;
  margin-top: 20px;
  border: 1px solid #fcc534;
}

.header-privacy {
  background-color: #141414;
  padding-top: 232px;
  padding-bottom: 250px;
  justify-content: center;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 68px !important;
  line-height: 110%;
}
.content-title-privacy {
  font-weight: 700;
  font-size: 48px;
  line-height: 110%;
  margin-bottom: 24px;
  margin-top: 64px;
}
.content-text-privacy {
  font-weight: 500;
  font-size: 18px;
  line-height: 180%;
  text-align: center;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* Adds border radius */
  background-color: #333;
  /* Sets background color */
  color: #fff;
  /* Sets icon color */
  text-decoration: none;
  /* Removes default link underline */
  transition: background-color 0.3s ease;
  /* Adds transition effect */
}

.social-icon:hover {
  background-color: #555;
  /* Change background color on hover */
}

.list-unstyled a {
  text-decoration: none;
}

.list-unstyled li {
  margin-bottom: 10px;
  /* Add margin bottom to create space between the links */
}

.contact-link {
  display: inline-block;
  margin-right: 10px;
  /* Adjust margin as needed */
  margin-bottom: 10px;
  /* Adjust margin as needed */
  padding: 10px 20px;
  border: 2px solid #fff;
  /* White border */
  color: #fff;
  /* Text color */
  text-decoration: none;
  font-size: 16px;
  transition: all 0.3s ease;
  border-radius: 10px;
}

.contact-link:hover {
  background-color: #333;

  color: #fff;
}
.marquee-container {
  width: 100%;
  overflow: hidden;
  
}

.marquee-container img {
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@media screen and (max-width: 768px) {
  .marquee-container img {
    animation-duration: 8s;
  }
}

@media screen and (max-width: 480px) {
  .marquee-container img {
    animation-duration: 8s;
  }
}

.button_start_today {
  font-size: 24px;
  line-height: 26px;
  margin-top: 60px;
  height: 70px;
  min-width: 300px;
  border: 2px solid #000;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
}

.button_start_today:hover {
  box-shadow: 4px 4px 0 #000;
}
#hero {
  width: 100%;
  height: 80vh;
  background: black;
}

#hero .container {
  padding-top: 72px;
}

#hero h1 {
  margin: 0 0 10px 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  color: #fff;
}

#hero h2 {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 50px;
  font-size: 24px;
}

#hero .btn-get-started {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px 11px 28px;
  border-radius: 10px;
  transition: 0.5s;
  margin: 10px 0 0 0;
  color: white;
  background:#e6af2e;
  text-decoration: none;
}

#hero .btn-get-started:hover {
  background: white;
   box-shadow: 4px 4px 0 #e6af2e;
   color: black;
}

#hero .btn-watch-video {
  font-size: 16px;
  display: flex;
  align-items: center;
  transition: 0.5s;
  margin: 10px 0 0 25px;
  color: #fff;
  line-height: 1;
}

#hero .btn-watch-video i {
  line-height: 0;
  color: #fff;
  font-size: 32px;
  transition: 0.3s;
  margin-right: 8px;
}

#hero .btn-watch-video:hover i {
  color: #47b2e4;
}

#hero .animated {
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@media (max-width: 991px) {
  #hero {
    height: 100vh;
    text-align: center;
  }

  #hero .animated {
    animation: none;
  }

  #hero .hero-img {
    text-align: center;
  }

  #hero .hero-img img {
    width: 50%;
  }
}

@media (max-width: 768px) {
  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }

  #hero h2 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }

  #hero .hero-img img {
    width: 70%;
  }
}

@media (max-width: 575px) {
  #hero .hero-img img {
    width: 80%;
  }

  #hero .btn-get-started {
    font-size: 16px;
    padding: 10px 24px 11px 24px;
  }
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-10px);
  }
}

#hero a {
  pointer-events: none;
}

/*--------------------------------------------------------------
  # Sections General
  --------------------------------------------------------------*/
section {
  /* padding: 60px 0; */
  overflow: hidden;
}

.section-bg {
  background-color: #1b363f;
}

.section-title {
  text-align: center;
  padding-bottom: 30px;
}

.section-title h2 {
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
  color: #37517e;
}

.section-title h2::before {
  content: "";
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}

.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #47b2e4;
  bottom: 0;
  left: calc(50% - 20px);
}

.section-title p {
  margin-bottom: 0;
}

.discription {
  margin-left: 16px;
}

.service-link {
  text-decoration: none;
}

stretched-link::after {
  content: none !important; /* Remove any content */
  /* Optionally, you can also remove other properties like color, background, etc. */
  /* background: none !important; */
  /* color: inherit !important; */
}

.card-text {
  color: rgb(122, 125, 148);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.card-title {
  color: rgb(58, 61, 80);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.75rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1 {
  margin: 50px 0 30px;
  /* text-align: center; */
}

.faq-container {
  max-width: 700px;
  margin: 0 auto;
}

.faq {
  background-color: transparent;
  border: 1px solid #6D8A76;
  border-radius: 10px;
  padding: 20px;
  margin: 20px 0;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.faq.active {
  background-color: #fff8c9;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
}

.faq-title {
  margin: 0 35px 0 0;
  font-size: 16px !important;
}

.faq-text {
  display: none;
  margin: 30px 0 0;
}

.faq.active .faq-text {
  display: block;
}

.faq-toggle {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: absolute;
  top: 30px;
  right: 30px;
  height: 30px;
  width: 30px;
}

.chevron,
.close {
  width: 12px;
  height: 12px;

}

.chevron{
    position: absolute;
    bottom: 25px;

}

.faq-toggle .close {
  display: none;
}

.faq.active .faq-toggle .close {
  display: block;
}

.faq.active .faq-toggle .chevron {
  display: none;
}

.faq.active .faq-toggle {
  background-color: #e6af2e;
  border-radius: 50%;
  color: #ffffd9;
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-header .title {
  font-size: 35px;
  font-weight: 600;
  text-transform: capitalize;
  color: hsl(0, 0%, 100%);
  line-height: 1.2;
}
/* .testimonials{
  padding: 100px 0;
} */
/* .testimonials-item{
  background-color: hsl(0, 0%, 100%);
  padding: 30px;
  border-radius: 30px;
} */

.testimonials-item .info {
  display: flex;
  align-items: center;
}
.testimonials-item img {
  max-width: 80px;
  max-height: 80px;
  border-radius: 50%;
  margin-right: 20px;
  vertical-align: middle;
}
.testimonials-item .name {
  font-size: 24px;
  text-transform: capitalize;
  font-weight: 600;
  color: hsl(0, 0%, 0%);
  line-height: 1.2;
}
.testimonials-item .job {
  text-transform: capitalize;
  color: hsl(0, 0%, 40%);
}
.testimonials-item p {
  margin-top: 20px;
  color: hsl(0, 0%, 40%);
}
.testimonials-item .rating {
  margin-top: 15px;
  font-size: 14px;
  color: hsl(36, 88%, 66%);
}

.testimonials .swiper-pagination {
  position: relative;
  margin-top: 40px;
  bottom: auto;
}
.testimonials .swiper-pagination-bullet {
  height: 12px;
  width: 12px;
  background-color: hsl(0, 0%, 100%);
}

.button-footer-demo {
  margin: 10px;
  padding: 10px 20px;
  background-color:black;
  color: white;
  border: none;
  cursor: pointer;
  text-decoration: none;
  border-radius: 10px;
}

.button-footer-start {
  margin: 10px;
  padding: 10px 20px;
  background-color: white;
  color: black;
  border: 1px solid rgb(123, 123, 123);
  cursor: pointer;
  text-decoration: none;
  border-radius: 10px;
}

.button-footer-demo:hover {
  background-color: #ffffff;
  color:black;
   box-shadow: 4px 4px 0 #000;
}

.button-footer-start:hover {
  background-color: rgb(233, 233, 233);
   box-shadow: 4px 4px 0 #000;
}

.btn {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
}

/* Default button style */
.start-btn {
  background-color: #007bff;
  color: #fff;
  border-radius: 15px;
}

/* Learn more button style */
.learn-more-btn {
  background-color: transparent;
  color: black;
  border: none;
  margin-left: 10px;
  position: relative;
}

/* Arrow icon style */
.arrow-icon {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  transition: transform 0.3s;
}

/* Hover effect for Learn more button */
.start-btn:hover {
  background-color: #074281 !important;
  color: #fff !important;
}

/* Hover effect for arrow icon */
/* .learn-more-btn:hover .arrow-icon {
  transform: translate(3px, -50%);
} */
.banner-pricing {
  color: #fff !important;
  font-weight: 700;
  font-size: 68px;
  line-height: 110%;
  width: 723px;
  margin: 0 auto;
}
@media (max-width: 991px) {
  .banner-pricing {
    width: auto; /* Adjust width for mobile devices */
    font-size: 36px; /* Adjust font size for smaller screens */
  }
  .creator-pricing {
    padding-top: 16px;
    font-size: 40px !important;
  }
  .disc-pricing {
    padding-top: 30px;
    width: 301px !important;
  }
}

@media (max-width: 1000px) {
  .header-privacy {
    font-size: 40px !important;
  }
  .content-title-privacy {
    font-size: 32px;
    margin-top: 56px;
  }
}
.pricing-started {
  background: #fff;
  border: 2px solid #000;
  border-radius: 12px;
  margin: 56px auto 0;
  padding: 26px 20px 26px 40px;
  width: 300px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease-in-out;
}
.pricing-started:hover {
  background: #fff !important;
  box-shadow: 4px 4px 0 #000;
  transition: all 0.25s ease-in-out;
}

.creator-pricing {
  font-weight: 700;
  font-size: 68px;
  line-height: 110%;
  color: #141414;
  text-align: center;
}

.disc-pricing {
  font-weight: 500;
  font-size: 18px;
  line-height: 150%;
  margin: 0 auto;
  width: 467px;
  text-align: center;
  padding-top: 20px;
}

.contact-links {
  font-size: 40px;
  color:black; /* Icon color */
  /* Icon size */
  background-color:white; /* Background color */
  border-radius: 50%; /* Border radius for circle shape */
  padding: 20px; /* Add padding to the icon */
  transition: background-color 0.3s ease;
}
.contact-links:hover{
  background-color: black;
  color: white;
}

.center-vertically {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}