/* Swiper Navigation Buttons */
.swiper-button-next, .swiper-button-prev {
    color: #000; /* Change the color of the arrows */
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.8); /* Background color for better visibility */
    border-radius: 50%; /* Make the buttons circular */
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-button-prev {
    position: absolute;
    left: 0; /* Position on the left */
    transform: translateX(-50%);
}

.swiper-button-next {
    position: absolute;
    right: 0; /* Position on the right */
    transform: translateX(50%);
}

.swiper-button-next::after, .swiper-button-prev::after {
    font-size: 20px; /* Size of the arrow icons */
}

.swiper-container {
    position: relative;
    padding: 0 50px; /* Adjust padding to avoid overlap with arrows */
}



/* play button  udemy business page */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 15px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}



.enquiry-button {
    margin-top: 20px;
    padding: 10px 30px;
    font-size: 1rem;
    color: #ffffff;
    background-color: blueviolet;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    justify-content: center;
    /* padding-left:20px;
  
    padding-right: 50%; */
}
.enquiry-button:hover {
    background-color:black;
}
.enquiry-button .btn-enquiry {
    background-color: #ff6600; /* Customize your button color */
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    display: inline-block;
    margin-top: 10px;
}

.enquiry-button .btn-enquiry:hover {
    background-color: #ff3300; /* Change color on hover */
}



.portfolio-filters-wrapper {
    display: flex;
    justify-content: center;
    padding: 20px;
    flex-wrap: nowrap; /* Keep buttons in a single line */
    overflow-x: auto; /* Allow horizontal scrolling on smaller screens */
  }
  
  .portfolio-filters-wrapper ul {
    display: flex;
    padding: 0; /* Remove default padding for a cleaner look */
    margin: 0; /* Remove default margin */
  }
  
  .portfolio-filters-wrapper li {
    display: inline-block; /* Ensure buttons are treated as block elements */
    padding: 0px; /* Reduced padding for better spacing */
  }
  
  .portfolio-filters-wrapper li button {
    border-radius: 4px;
    background-color: #086ad7;
    color: #ffffff;
    padding: 2px; /*Adjust padding for button size*/
    font-size: 14px; /* Adjust font size for readability */
    white-space: nowrap; /* Prevent text wrapping within buttons */
    margin: 0px; /* Add margin for spacing between buttons */
    flex-shrink: 0; /* Prevent buttons from shrinking */
  }
  
  .portfolio-filters-wrapper li button:hover {
    background-color: #000;
    color: #ffffff;
    transition: all 0.4s ease-in-out;
  }
  
  @media (max-width: 991px) {
    .portfolio-filters-wrapper {
      justify-content: flex-start; /* Align items to the start on smaller screens */
      padding: 0px; /* Adjust padding for smaller screens */
    }
  
    .portfolio-filters-wrapper li button {
      padding: 8px 16px; /* Adjust padding for smaller buttons */
      font-size: 13px; /* Slightly reduce font size for smaller screens */
    }
  }

  .portfolio-filters-wrapper {
    display: flex;
    justify-content: center;
    padding: 20px;
    flex-wrap: nowrap; /* Keep buttons in a single line */
    overflow-x: auto; /* Allow horizontal scrolling on smaller screens */
  }
  
  .portfolio-filters-wrapper ul {
    display: flex;
    padding: 0; /* Remove default padding for a cleaner look */
    margin: 0; /* Remove default margin */
  }
  
  .portfolio-filters-wrapper li {
    display: inline-block; /* Ensure buttons are treated as block elements */
    padding: 0px; /* Reduced padding for better spacing */
  }
  
  .portfolio-filters-wrapper li button {
    border-radius: 4px;
    background-color: #086ad7;
    color: #ffffff;
    padding: 2px; /*Adjust padding for button size*/
    font-size: 14px; /* Adjust font size for readability */
    white-space: nowrap; /* Prevent text wrapping within buttons */
    margin: 0px; /* Add margin for spacing between buttons */
    flex-shrink: 0; /* Prevent buttons from shrinking */
  }
  
  .portfolio-filters-wrapper li button:hover {
    background-color: #000;
    color: #ffffff;
    transition: all 0.4s ease-in-out;
  }
  
  @media (max-width: 991px) {
    .portfolio-filters-wrapper {
      justify-content: flex-start; /* Align items to the start on smaller screens */
      padding: 0px; /* Adjust padding for smaller screens */
    }
  
    .portfolio-filters-wrapper li button {
      padding: 8px 16px; /* Adjust padding for smaller buttons */
      font-size: 13px; /* Slightly reduce font size for smaller screens */
    }
  }

  /* pricing */
  @media (max-width: 768px) {
    .row-button {
        flex-direction: column;
        padding: 20px;
    }
    .row-button li {
        padding: 10px;
    }
    .row-button li button {
        width: 100%;
        padding: 12px 0;
        font-size: 16px;
    }
    .rows {
        display: none;
        flex-direction: column; /* Stack elements vertically */
        width: 100%;
        padding: 10px 0;
    }
    .rows .col-sm-12, 
    .rows .col-md-6, 
    .rows .col-lg-4 {
        width: 100%;
        padding: 10px 0;
    }
    .price__element {
        margin: 0 auto; /* Center the price elements */
        width: 90%; /* Make elements take most of the width */
    }
    .price__range h3 {
        font-size: 24px; /* Adjust font size for pricing */
    }
    .theme-btn {
        padding: 10px;
        font-size: 16px;
    }
    .section-title h2 {
        font-size: 24px;
    }
}
@media (max-width: 768px) {
    .row-button {
        display: flex;
        flex-wrap: wrap; /* Allows buttons to wrap to next line if necessary */
        justify-content: center;
        padding: 20px;
    }
    .row-button li {
        padding: 10px;
        flex: 1; /* Allows each button to take equal space */
        max-width: 100%; /* Prevents buttons from exceeding their container */
    }
    .row-button li button {
        width: auto; /* Keeps buttons inline */
        padding: 12px 20px; /* Adjust padding for better appearance */
        font-size: 14px; /* Adjust font size for mobile */
    }
    .rows {
        display: none;
        flex-direction: column;
        width: 100%;
        padding: 10px 0;
    }
    .rows .col-sm-12, 
    .rows .col-md-6, 
    .rows .col-lg-4 {
        width: 100%;
        padding: 10px 0;
    }
    .price__element {
        margin: 0 auto;
        width: 90%;
    }
    .price__range h3 {
        font-size: 24px;
    }
    .theme-btn {
        padding: 10px;
        font-size: 16px;
    }
    .section-title h2 {
        font-size: 24px;
    }
}




/* General form styles */
.php-email-form {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  }
  
  .php-email-form .form-control {
    border: 1px solid #fff;
    border-radius: 4px;
    padding: 10px;
    font-size: 16px;
    margin-bottom: 15px;
    width: 100%;
  }
  
  .php-email-form .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    outline: none;
  }
  
  /* Button styles */
  .php-email-form button[type="submit"] {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .php-email-form button[type="submit"]:hover {
    background-color: #0056b3;
  }
  
  /* Loading and messages */
  .php-email-form .loading {
    display: none;
    font-size: 14px;
    color: #007bff;
  }
  
  .php-email-form .error-message {
    display: none;
    color: red;
    font-size: 14px;
  }
  
  .php-email-form .sent-message {
    display: none;
    color: green;
    font-size: 14px;
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .php-email-form .row .col-md-6 {
      width: 100%;
      margin-bottom: 15px;
    }
  }