.pricing-card{
    border-radius: var(--btn-border);
}


/* pricing */
.pricing{
    background-color: var(--bg);
    min-height: 50%;
    
    /* padding: 2rem 0; */
}
.pricing-container{
    background: white;
    border-radius: var(--div-border);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
    max-width: 800px;
    margin: 0 auto;
}
.premium-button{
    border-radius: var(--btn-border) ;
    border-color: white !important;
}
.premium-button:hover{
  background-color: white !important;
  color: var(--text-dark) !important;
  border-color: var(--primary-color) !important;

}

.premium-button:active{
    border-color: var(--primary-color) !important;
    background-color: white !important;
}
.premium-button:focus{
    color: var(--text-dark);
    border-color: var(--primary-color) !important;
    background-color: white !important;
}


/* tutorial */

.step-content { display: none; }
  .step-content.active { display: block; }
  .progress-bar { transition: width 0.3s ease; }
  .guide-container {
    background-color: var(--bg);
    min-height: 100vh;
    /* padding: 2rem 0; */
  }
  .guide-card {
    background: white;
    border-radius: var(--div-border);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
    padding: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
  }
  .step-button {
    width: 100%;
    text-align: left;
    padding: 1rem;
    border: none;
    background: none;
    cursor: pointer;
  }
  .step-button:focus {
    outline: none;
  }
  .step-item {
    border: 1px solid #dee2e6;
    border-radius: var(--btn-border);
    margin-bottom: 0.75rem;
    overflow: hidden;
  }
  .gradient-btn {
    background-image: linear-gradient(to right, #4f46e5, #8b5cf6, #ec4899);
    color: white;
    border: none;
  }
  .gradient-btn:hover {
    color: white;
    opacity: 0.9;
  }


  /* video  */

  .tutorial-video-container {
    background-color: var(--bg);
    min-height: 50%;
    /* padding: 2rem 0; */
  }
  .tutorial-video{
    background: white;
    border-radius: 0 0 var(--div-border) var(--div-border);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
    max-width: 800px;
    margin: 0 auto;
  }
  .video-container {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 aspect ratio */
      height: 0;
      box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
      overflow: hidden;
      border-radius: 0 0 var(--div-border) var(--div-border);
  }

  .video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
  }
  .home-video-title{
      background: white;
      border-radius: var(--div-border) var(--div-border) 0 0;
  }

  /* Basic styling for the play button */
  .video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
  }

  .video-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px; /* Adjust size as needed */
    height: 40px; /* Adjust size as needed */
    background-color: var(--primary-color);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .play-button::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 18px;
    border-color: transparent transparent transparent #ffffff;
  }

@media (min-width: 768px) {
    .tutorial-container{
    background: white;
    border-radius: var(--div-border);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
    }
    .guide-card {
    box-shadow: none;
    }

    /* video */
    .tutorial-video-container{
    background: white;
    border-radius: var(--div-border);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
    }
    .tutorial-video {
    box-shadow: none;
    max-width: 750px;
    padding: 1px 0;
    }
    .video-container {
    border-radius: var(--div-border);
    }

}
/* tutorial */





@media (min-width: 768px) {
.pricing-container{
    max-width: 750px;
    box-shadow: none !important;
}
.pricing{
    background-color:white;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
    border-radius: var(--div-border);
}
.faq-container-sub{
  max-width: 750px;
}
}

.accordion-button{
  border-radius: none;
  border-top: 5px !important;
}
.accordion-item, .accordion-header, .accordion-button{
  border-radius: var(--btn-border) !important;
}
.accordion-body{
  text-align: left;
}
.accordion-button:active{
  border: none !important;
  background-color: var(--secondary-color) !important;
}
.accordion-button:not(.collapsed){
  background-color: var(--secondary-color) !important;
}
.accordion-button:focus {
  box-shadow: none;
  outline: none;
  background-color: transparent;
}

.home-faq-title{
  background: white;
  border-radius: var(--div-border);
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
  }

.faq-container-sub{
    max-width: 800px;
}


.social-three{
    background-color: var(--bg);
    min-height: 50%;
      background: white;
  border-radius: var(--div-border);
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}

.social-list-heading {
  margin-bottom: 1.5rem;
}

.social{
  border: none;
}
.social:hover, .social:focus, .social:active {
  color: var(--primary-color);
}