/* Base Accordion Styling */
.panel-group {
  margin: 20px auto;
  max-width: 600px; /* Adjust based on your preference */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Soft shadow for depth */
  border-radius: 8px; /* Rounded corners */
  overflow: hidden; /* Keeps child elements within the border radius */
}

.panel-heading {
  background-color: #319ED8; /* Vibrant blue background */
  border-bottom: 1px solid #0056b3; /* Slightly darker border for contrast */
  padding: 15px 20px; /* Increased spacing around headings */
  cursor: pointer; /* Change mouse cursor on hover */
  transition: background-color 0.3s ease; /* Smooth background transition */
}

.panel-heading:hover {
  background-color: orange; /* Darker shade on hover for interaction feedback */
}

.panel-title {
  margin: 0; /* Remove default margin */
  font-size: 18px; /* Slightly larger title size */
  color: #ffffff; /* Light text color for contrast */
  font-weight: 600; /* Medium font weight */
}

.panel-title a {
  text-decoration: none; /* No underline on link */
  display: block; /* Make the entire area clickable */
  color: inherit; /* Inherits color from parent for consistency */
}

.panel-body {
  background-color: #f9f9f9; /* Light background for the content area */
  padding: 20px; /* Increased padding for more space */
  line-height: 1.6; /* Improved line height for readability */
  border-top: 1px solid #eee; /* Subtle top border for definition */
  transition: all 0.3s ease; /* Smooth transitions for expanding/collapsing */
}

.fa-angle-right {
  transition: transform 0.3s ease; /* Smooth rotation transition */
}

.panel-heading.active .fa-angle-right {
  transform: rotate(90deg); /* Rotates icon to indicate expansion */
}

/* Enhanced styles for different panel colors (optional) */
.progress-bar-red, .progress-bar-green, .progress-bar-lblue, .progress-bar-yellow {
  transition: width 0.6s ease; /* Smooth transition for progress bar width changes */
}

/* Custom styles for panel colors (if desired) can go here */
.panel-collapse {
  display: none; /* Hide panel body initially */
}


.tashi{
   background-color:whitesmoke;
    padding: 20px;
    border-radius: 8px; /* Softly rounded corners for a modern look */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effect */
}


/* General styling for the progress container */
.progress {
  height: 20px; /* Adjust the height of the progress bar */
  background-color: #ebebeb; /* Light grey background */
  border-radius: 5px; /* Rounded corners */
  overflow: hidden; /* Ensures the inner bar stays within the rounded corners */
  margin-bottom: 20px; /* Space below each progress bar */
}

/* Base styling for the progress bar itself */
.progress-bar {
  float: left; /* Align to the left */
  height: 100%; /* Fill the height of the container */
  font-size: 12px; /* Font size inside the progress bar */
  line-height: 20px; /* Align the text vertically */
  color: #ffffff; /* Text color */
  text-align: center; /* Center the text */
  transition: width 0.6s ease; /* Smooth transition for changes in progress */
}

/* Specific color styles for different progress bars */
.progress-bar-red {
  background-color: #d9534f; /* Bootstrap's btn-danger color */
}

.progress-bar-green {
  background-color: #5cb85c; /* Bootstrap's btn-success color */
}

.progress-bar-lblue {
  background-color: #5bc0de; /* Light blue, similar to Bootstrap's btn-info color */
}

.progress-bar-yellow {
  background-color: #f0ad4e; /* Bootstrap's btn-warning color */
}

/* Styling for headings to better integrate with the progress bars */
h6 {
  margin-top: 0;
  margin-bottom: 5px; /* Smaller space between heading and progress bar */
  font-weight: 600; /* Slightly bolder font */
}



/* Testimonials Section Styling */

.testimonial-area {
  padding: 0 0 0 0;
margin:0;
background: url(../img/low-poly01.jpg) fixed center center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
text-align: center;
}

.testimonial-solid p {
color: #000;
font-size: 16px;
line-height: 30px;
font-style: italic;
} 
.carousel-inner {
    position: relative;
}

.item {
    display: none;
    transition: opacity 0.5s ease-in-out;
	
}

.item.active {
    display: block;
    opacity: 1;
}

.item p {
    font-size: 16px;
    color: #333;
    margin-bottom: 15px;
	text-align: center;
}

.item b {
    display: block;
    margin-top: 10px;
    font-weight: bold;
	text-align: center;
}

.carousel-indicators {
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.carousel-indicators li {
    display: inline-block;
    margin: 0 5px;
    width: 10px;
    height: 10px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
}

.carousel-indicators li.active {
    background-color: #333;
}

/* Portfolio Filter Styles */
    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }
    .modal-content {
        background-color: #fefefe;
        margin: 15% auto; /* 15% from the top and centered */
        padding: 20px;
        border: 1px solid #888;
        width: 30%; /* Could be more or less, depending on screen size */
    }
    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }
    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
    .modal select,
    .modal button {
        margin-top: 10px;
        width: 95%;
        padding: 10px;
        border-radius: 5px;
    }