/* Theme Name: Zodkoo - Bootstrap 4 Landing page template
   Author: Coderthemes
   Author e-mail: coderthemes@gmail.com
   Version: 1.5
   Created: May 2016
   Last Update: May 2018
   File Description:Main CSS file of the template
*/

/*------------------------------------------------------------------

[Table of contents]

1. Reset
2. Helper classes
3. Buttons
4. Dropdown
5. Navbar Custom
6. Home
7. FEATURES
8. Pricing
9. Testimonials
10. SUBSCRIBE
11. Footer
12. Other pages CSS
    12.1 Contact
    12.2 Team
    12.3 FAQ
    12.4 JOB
    12.5 Intro Form
13. Responsive

-------------------------------------------------------------------*/


/*======= 1.Reset ======== */
body {
  font-family: 'Roboto', sans-serif;
  color: #496174;
  background: #fff;
  font-size: 14px;
  line-height: 22px;
  overflow-x:hidden;
}

::selection{
  background: rgba(249, 230, 5, 0.5);
  color: #496174;
}

::-moz-selection {
  background: rgba(249, 230, 5, 0.5);
  color: #496174;
}

a:hover,a:focus,.a:active {
  text-decoration: none;
  outline: none !important;
}

/* Back to top */
.back-to-top {
  width: 30px;
  height: 30px;
  position: fixed;
  bottom: 10px;
  right: 20px;
  display: none;
  text-align: center;
  z-index: 10000;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #496174;
}

.back-to-top i {
  color: #fff;
  font-size: 22px;
  display: block;
  line-height: 30px;
}


/*======= 2.Helper classes ======== */
.section {
  padding-top: 100px;
  padding-bottom: 80px;
}

.sub-title {
  margin-bottom: 40px;
  font-size: 15px;
}

.title {
  font-size: 22px;
  margin-top: 0;
}

.text-white {
  color: #ffffff !important;
}

.text-muted {
  color: #95A8B7 !important;
}

.text-light {
  color: rgba(255, 255, 255, 0.7) !important;
}

.font-light {
  font-weight: 300;
}

.bg-light {
  background-color: #f3f6fa !important;
  border-top: 1px solid #E6EDF3;
  border-bottom: 1px solid #E6EDF3;
}

.m-t-20 {
  margin-top: 20px;
}

.m-t-0 {
  margin-top: 0px !important;
}

.m-b-0 {
  margin-bottom: 0px;
}

.p-0 {
  padding: 0px !important;
}

.w-full {
  width: 100% !important;
}

.h1, h1 {
    font-size: 36px;
}

.h2, h2 {
    font-size: 30px;
}

.h4, h4 {
    font-size: 18px;
}

.h5, h5 {
    font-size: 14px;
}

/* Background Images */
.bg-img-1 {
  background: url("../../assets/img/bg/01_home.jpg") no-repeat;
  background-size: cover;
}
.bg-img-2 {
  background: url("../images/bg1.jpg") center no-repeat;
  background-size: cover;
}
.bg-img-3 {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url("../images/bg3.jpg") center no-repeat;
    background-size: cover;
}
.bg-img-5 {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url("../images/bg5.jpg") center no-repeat;
    background-size: cover;
}

/*======= 3.Buttons ======= */
.btn {
  border-radius: 2px;
  padding: 8px 16px;
  outline: none !important;
  box-shadow: none !important;
}

.btn-sm {
  padding: 5px 10px !important;
}

.btn-white-fill {
  padding: 8px 24px !important;
  background-color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.75) !important;
  border-radius: 50px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 14px;
}

.btn-white-fill:hover {
  border: 2px solid rgba(255, 255, 255, 0.75) !important;
  background-color: transparent;
  color: #ffffff !important;
}

.btn-white-bordered {
  padding: 8px 24px !important;
  background-color: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.75) !important;
  color: #ffffff;
  border-radius: 50px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
}

.btn-white-bordered:hover {
  background-color: #ffffff !important;
}

.btn-custom {
  padding: 8px 24px !important;
  color: #ffffff !important;
  border-radius: 50px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 14px;
}

.btn-custom:hover {
  background-color: transparent !important;
}

.video-btn {
  color: #e55a55 !important;
  letter-spacing: 1px;
  outline: none !important;
}

.video-btn i {
  margin-right: 7px;
  width: 20px;
  height: 20px;
  border: 2px solid #e55a55;
  border-radius: 50%;
  line-height: 17px;
  vertical-align: middle;
  text-align: center;
  font-size: 12px;
  padding-left: 3px;
  margin-left: -12px;
}

/*======= 4.Dropdown ======= */
.dropdown-menu {
  box-shadow: none;
  padding: 4px;
  border-radius: 4px !important;
  -webkit-animation: dropdownOpen 0.3s ease-out;
  -o-animation: dropdownOpen 0.3s ease-out;
  animation: dropdownOpen 0.3s ease-out;
  border: 2px solid #eee;
}

.dropdown-menu > li > a {
  padding: 6px 20px;
  font-size: 15px !important;
  color: #496174 !important;
}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
  color: #ffffff !important;
}

@-webkit-keyframes dropdownOpen {
  0% {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes dropdownOpen {
  0% {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

/* Modals */
.modal .modal-dialog .modal-content {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  border-color: #DDDDDD;
  border-radius: 2px;
  box-shadow: none;
  padding: 25px;
}

.modal .modal-dialog .modal-content .modal-header {
  border-bottom-width: 2px;
  margin: 0;
  padding: 0;
  padding-bottom: 15px;
}

.modal .modal-dialog .modal-content .modal-body {
  padding: 20px 0;
}

.modal .modal-dialog .modal-content .modal-footer {
  padding: 0;
  padding-top: 15px;
}

/*===== 5. Navbar Custom ======*/

.navbar-custom {
  width: 100%;
  border-radius: 0px;
  z-index: 999;
  padding: 15px 0px;
  margin-bottom: 0px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.navbar-custom .navbar-nav li a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  margin: 10px 0px;
  padding: 4px 15px !important;
}

.navbar-custom .nav>li>a:focus,.navbar-custom .nav>li>a:hover,.navbar-custom .navbar-nav li.active a {
  background-color: transparent;
  color: #ffffff;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.75);
}

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: rgb(255, 255, 255);
}

.navbar-toggler {
    font-size: 20px;
    border: none !important;
    outline: none !important;
}

.navbar-toggle .icon-bar {
  background-color: #ffffff;
}

.navbar-btn{
  padding: 5px 20px !important;
  text-transform: none !important;
  font-weight: 400;
  margin-top: 8px !important;
}

.logo {
  font-weight: 500;
  font-size: 22px;
  color: #ffffff !important;
  letter-spacing: 1px;
}

.navbar-toggle {
  font-size: 30px;
}

.navbar-custom .btn-custom {
  margin-top: 8px;
  margin-left: 20px;
}

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
  background-color: transparent;
  border-color: #337ab7;
}

.sticky-wrapper {
	position: absolute;
	width: 100%;
}

.sticky-wrapper.is-sticky .navbar-custom {
	padding: 10px 0px !important;
}



/*======= 6. Home =======*/

.home-fullscreen {
  /*height: 100vh;*/
  height: 70vh;
  min-height: 400px;
}

.home-wrapper {
  /*padding: 200px 0px 150px 0px;*/
  padding: 82px 0px 20px 0px;
}

.home-sm {
  /*padding: 175px 0px 125px 0px !important;*/
  padding: 82px 0 20px 0 !important;
}
.home-sm .h1 {
  margin-top: 30px !important;
}
.home-wrapper-alt{
  display: table-cell;
  vertical-align: middle;
  padding-top: 2rem;
}

.home-wrapper h1{
  line-height: 46px;
  width: 80%;
  margin: 0 auto;
}

.home-wrapper h4 {
  line-height: 24px;
  font-size: 16px;
  font-weight: 400;
  width: 80%;
  margin: 30px auto 30px auto;
}

.full-screen {
  display: table;
  height: 100%;
  width: 100%;
}

/* === Hero Section Adjustments === */
/* Further reduce padding on smaller screens */
@media (max-width: 768px) {
  .home-wrapper {
    padding: 80px 0px 60px 0px; /* Less padding on mobile */
  }
}

.or-space {
  margin: 0 20px;
}

iframe {
  max-width: 100%;
}

.frame-border {
  border: 9px solid rgba(0, 0, 0, 0.3);
  webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}

/* ==== 7. FEATURES ==== */

.feat-description p {
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 26px;
}

.feat-description h4 {
  font-weight: 300;
  line-height: 28px;
}

.title-box-icon i {
  font-size: 48px;
  margin-bottom: 20px;
}

.title-box-icon h3 {
  margin-bottom: 70px;
}

.features-box {
  margin-top: 20px;
  padding: 20px;
  text-align: center;
}

.features-box i {
  font-size: 48px;
}



/* ==== 8. Pricing === */

.pricing-column {
  position: relative;
  margin-bottom: 40px;
}

/* Pricing Column with Box Shadow */
.pricing-column .inner-box {
  position: relative;
  margin: 20px auto 0px auto;
  max-width: 340px;
  padding: 0 30px 50px;
  border: 2px solid #95A8B7;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Consistent box shadow */
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.inner-box p {
  padding: 0px 20px;
  text-align: center;
  font-size: 15px;
  line-height: 26px;
  color: #7f7f7f;
  margin-bottom: 30px;
}

.inner-box.active {
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
}

.back-btn, .back-btn a {
  color: #777777;
  text-decoration: none;
  font-size: 14px;
  margin: 1em;
}

.back-btn a:hover{
  color: #999999;
}

.pricing-column .plan-header {
  position: relative;
  padding: 30px 20px 25px;
}

.pricing-column .plan-title {
  font-size: 16px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
}

.pricing-column .plan-price {
  font-size: 38px;
  margin-bottom: 10px;
  font-weight: 700;
}

.pricing-column .plan-duration {
  font-size: 13px;
  color: #98a6ad;
}

.pricing-column .plan-stats {
  position: relative;
  padding: 30px 20px 15px;
}

.pricing-column .plan-stats li {
  margin-bottom: 15px;
  line-height: 24px;
}

.pricing-column .plan-stats li i {
  font-size: 18px;
  width: 26px;
  vertical-align: middle;
}

/* Hover effect for pricing option boxes */
/* Hover Effect for Pricing Column */
.pricing-column .inner-box:hover {
  background-color: rgba(0, 0, 0, 0.4); /* Darker transparent effect */
  border-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  transform: translateY(-5px);
  transition: all 0.3s ease-in-out;
}

.full-box-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* Apply red color on hover */
.full-box-link:hover,
.full-box-link:hover * {
  color: inherit;
}

.full-box-link:hover .inner-box {
  background-color: rgba(0, 0, 0, 0.4);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  transform: translateY(-5px);
}

/* === 9.Testimonials === */

.testimonial-description {
  margin-top: 50px;
  border-radius: 5px;
  padding: 30px 30px 20px 30px;
  position: relative;
  background-color: #ffffff;
  box-shadow: 1px 1px 2px rgba(222, 222, 222, 0.32);
}

.testimonial-description:after {
  content: "";
  bottom: -15px;
  left: 50px;
  position: absolute;
  width: 0;
  height: 0;
  border-top: 15px solid #fff;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.testimonial-description p {
  line-height: 24px;
  font-size: 14px;
  font-style: italic;
}

.testimonial-user-thumb img{
  border-radius:50%;
  width: 60px;
  height: 60px;
}

.testimonial-user-name {
  margin-bottom: 0px;
}

.user-thumb,
.user-text{
  display: inline-block;
  vertical-align:bottom;
}

.user-thumb{
  margin-right:15px;
}

.testimonial-user-info{
  padding-left:30px;
  margin-top: 35px;
}

.user-position{
  font-weight:400;
  display: block;
}


/* === 10. SUBSCRIBE === */

.input-subscribe {
  background-color: transparent !important;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, 0.4);
  height: 50px;
  padding-left: 20px;
  box-shadow: none !important;
  margin-bottom: 10px;
}

.input-subscribe:focus {
  border: 2px solid rgba(255, 255, 255, 0.6);
}

input.input-subscribe::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-weight: normal;
}

input.input-subscribe:-moz-placeholder {
  color: rgba(255, 255, 255, 0.4);
}

input.input-subscribe::-moz-placeholder {
  color: rgba(255, 255, 255, 0.4);
}

input.input-subscribe:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.4);
}

label.valid {
  color: #ffffff;
  font-weight: normal;
  margin: 10px 0;
}


/*======= 11 Footer =======*/

.footer {
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: #2f3e47;
}

.footer h5{
  color: #ffffff;
  font-size: 15px;
  margin-bottom: 20px;
  font-weight: 700;
  letter-spacing: 1px;
}

.footer a{
  color: rgba(255, 255, 255, 0.4);;
}

.footer a:hover{
  color: rgba(255, 255, 255, 0.6);;
}

.footer ul li {
  margin: 5px 0px;
}

.footer-alt {
  margin-top: 30px;
  padding-top: 20px;
}

.footer address {
  color: rgba(255, 255, 255, 0.4);
  line-height: 24px;
  font-size: 13px;
}


/* == 12. Other pages CSS === */

.header-title-box {
  padding-top: 190px;
  padding-bottom: 155px
}

.header-title-box h3 {
  font-size: 30px;
  font-weight: 300;
}

.title-about h3 {
  margin-bottom: 30px;
}

.wide-img-showcase-row {
  position: relative;
}

.no-padding.img {
  background: url(../images/showcase-1.jpg) scroll center no-repeat;
  background-size: cover;
  position: absolute;
  height: 100%;
}

.no-padding.img-2 {
  background: url(../images/showcase-2.jpg) scroll center no-repeat;
  background-size: cover;
  position: absolute;
  height: 100%;
}

.about-detail-img-box {
  padding: 15% 0;
}


/* == 12.1 Contact ==*/
textarea {
  max-width: 100%;
}

.contact-form .form-control {
  height: 42px;
  box-shadow: none;
  border: 2px solid rgba(40, 40, 46, 0.3);
}

textarea.form-control {
  height: auto !important;
}

.error {
  margin: 8px 0px;
  display: none;
  color: red;
  font-weight: normal;
}

#ajaxsuccess {
  font-size: 16px;
  width: 100%;
  display: none;
  clear: both;
  margin: 8px 0px;
}

.contact-box {
  padding: 30px;
}

.contact-detail {
  margin-bottom: 40px;
}
.contact-detail i{
  float: left;
  width: 40px;
  font-size: 24px;
}

.contact-detail p,.contact-detail address{
  overflow: hidden;
}

.contact-detail a {
  color: #496174;
}
.parsley-error {
  border: 2px solid red !important;
}
.parsley-errors-list {
  padding-left: 0px;
}
.parsley-errors-list li {
  list-style: none;
  color: red;
  margin-top: 3px;
  font-size: 13px;
}

/*== 12.2 Team ==*/

.team img {
  max-width: 240px;
  margin: 0px auto;
  background-color: #fafafa;
}

.team .team-member {
  margin: 30px 0px;
}

.team .team-member h4 {
  padding-top: 20px;
  margin-bottom: 5px;
}

.team .team-member p {
  margin-bottom: 0px;
}

/* ==== 12.3 FAQ ==== */
.question {
  margin-top: 40px;
  font-weight: 400;
  font-size: 16px;
}

/* === 12.4 JOB ===*/
.job-box {
  padding: 20px 30px;
  background-color: #f3f6fa;
  border: 1px solid #E6EDF3;
  border-radius: 5px;
  margin-bottom: 30px;
}

.job-box h5 {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 15px;
}

.btn-job {
  padding: 6px 20px !important;
  font-size: 12px;
  text-transform: none;
  margin-top: 10px;
}

/* == 12.5 Intro Form ===*/
.intro-form {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 5px;
  color: #333333;
  -webkit-box-shadow: 0px 22px 45px -15px rgba(0,0,0,0.5) !important;
  -moz-box-shadow: 0px 22px 45px -15px rgba(0,0,0,0.5) !important;
  box-shadow: 0px 22px 45px -15px rgba(0,0,0,0.5) !important;
}

.intro-form h3{
  color: #949799;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 30px;
  margin-top: 0px;
}

.intro-form input {
  border: 1px solid #eee;
  height: 38px;
  box-shadow: none !important;
  font-size: 14px;
}

.modal-dialog {
    /*max-width: 600px !important;*/
    margin: 1.75rem auto;
}

.intro-form .form-group:last-of-type {
  margin-bottom: 0;
}


.help-block small a {
    color: #337ab7;
}

.help-block small a:hover {
    color: #23527c;
}

/*======= 13. Responsive ======*/
@media (min-width: 768px) {
  .nav-custom-left {
    margin-left: 5%;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

@media (max-width: 768px) {
  .no-padding.img, .no-padding.img-2 {
    position: relative;
    height: 300px;
  }

  .video-wrapper {
    padding-top: 50px;
  }

  .intro-form {
    margin-top: 50px;
  }

  .feat-description {
    margin-bottom: 50px;
    text-align: center;
  }

  .navbar-custom > .container {
    width: 90%;
  }

  .home-fullscreen {
    height: auto !important;
  }

  .home-wrapper {
    padding: 20px 0;
  }

  /*!* Full-width class selection styling *!*/
  /*.full-width-class-selection {*/
  /*  width: 100%;*/
  /*  text-align: center;*/
  /*  background-color: #f5f5f5; !* Light gray background for contrast *!*/
  /*  padding: 40px 20px;*/
  /*  border-radius: 8px;*/
  /*  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);*/
  /*}*/
  /*.full-width-class-selection h2 {*/
  /*  margin-bottom: 20px;*/
  /*  font-size: 1.8rem;*/
  /*}*/
  /*.full-width-class-selection select {*/
  /*  max-width: 400px;*/
  /*  margin: 0 auto 20px auto;*/
  /*}*/
  /*.full-width-class-selection button {*/
  /*  margin-top: 10px;*/
  /*}*/
}

  /* Student Info Form Styling */

  #student-info h2 {
    margin-bottom: 30px;
    font-size: 1.8rem;
    color: #333;
  }

  #student-info form {
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
  }

  #student-info .form-group {
    margin-bottom: 20px;
  }

  #student-info .form-control {
    height: 45px;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 10px 15px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
  }

  #student-info .form-control:focus {
    border-color: #e55a55;
    box-shadow: 0 0 5px rgba(229, 90, 85, 0.5);
  }

  #student-info .btn-custom {
    width: 100%;
    padding: 12px 20px;
    font-size: 1.1rem;
    border-radius: 5px;
    background-color: #e55a55;
    color: #fff;
    border: none;
    transition: background-color 0.3s ease;
  }

  #student-info .btn-custom:hover {
    background-color: #d14c4a;
  }

  #student-info input::placeholder {
    color: #999;
  }

  /* Mobile Responsiveness */
  @media (max-width: 576px) {
    #student-info form {
      width: 90%;
    }

    #student-info .form-control {
      font-size: 0.9rem;
    }
  }

.lesson-option {
  cursor: pointer;
  border: 1px solid #ccc;  /* Default border */
  padding: 30px;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
  background: #ffffff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin: 15px auto;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lesson-option:hover {
  border-color: #bfbfbf;  /* Lighter gray border on hover */
  background: #f7f7f7;  /* Soft gray background */
  color: #333333;
  transform: scale(1.05);  /* Slightly enlarges */
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.15);
}

.lesson-option.selected {
  border-color: #bfbfbf;  /* Keeps light gray border when selected */
  background: #f7f7f7;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2);
}

.lesson-option i {
  font-size: 4em;  /* Make icon bigger */
  color: #333;
  transition: color 0.3s ease-in-out;
}

.lesson-option:hover i,
.lesson-option.selected i {
  color: #666;
}

.lesson-option h4 {
  margin-top: 15px;
  font-size: 1.3em;
  font-weight: bold;
  color: #333;
}

.learn-more-btn {
  margin-left: 10px;
  border: 2px solid #ffffff;
  color: #ffffff;
  border-radius: 50px;
  padding: 8px 24px !important;
}

.learn-more-btn:hover {
  background-color: #fff;
  border: 2px solid #ffffff;
  color: #333;
}

.pricing-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: url('/assets/img/bg/01_home.jpg') no-repeat center center;
  background-size: cover;
  background-attachment: fixed; /* Optional: Adds a parallax effect */
  padding: 100px 0; /* Adjusts vertical spacing */
  color: #fff; /* Ensures text is readable */
}

@media (max-width: 768px) {
  .pricing-section {
    background-attachment: scroll; /* Prevents stretching on mobile */
    background-position: center top; /* Aligns image properly */
  }
}

/* Optional: Adds a dark overlay for better readability */
.pricing-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Adjust transparency */
  z-index: 1;
}

/* Ensures text appears above the overlay */
.pricing-section .container {
  position: relative;
  z-index: 2;
}