.item, .owl-item {

    /*width: 270px !important;*/

}



.owl-stage {

    display: flex !important;  /* Ensure items are in a flexbox */

    justify-content: flex-start;  /* Align items to the left */

}



.owl-carousel {

    margin-left: auto;

    margin-right: auto;

    /*max-width: 1260px; */

}

 

  .employee-card {

    border: 1px solid #ddd;

    padding: 15px;

    border-radius: 5px;

    margin:0 auto;

    margin-bottom: 20px;

    margin-top: 20px;

    text-align: center;

    background-color: white;

    display: flex; /* Use flexbox for centering */

    flex-direction: column; /* Stack items vertically */

    justify-content: center; /* Center content vertically */

    align-items: center; /* Center content horizontally */

    transition: transform 0.2s; /* Smooth transition for hover effect */

    height:450px;

    /*width:280px;*/

}











.employee-card:hover {

    transform: scale(1.05); /* Scale up on hover */

}



.employee-card img {

    border-radius: 50%; /* Circular shape */

    width: 100px !important; /* Fixed width */

    height: 100px; /* Fixed height to maintain aspect ratio */

    object-fit: cover;

    margin-bottom: 10px; /* Space below the image */

}



.employee-card h5 {

    margin-top: 10px;

    font-size: 18px;

    font-weight: bold; /* Make the name bold */

}



.employee-card p {

    line-height: normal; /* Reset any inherited line-height */

    margin-bottom: 5px; /* Set a smaller or custom margin */

}



.price, .rating, .consultation-time {

    font-size: 14px;

    color: #555;

}



.choose-time-btn {

    background-color: #081351; /* Dark background for button */

    color: #fff;

    padding: 8px 15px;

    border: none;

    border-radius: 5px;

    cursor: pointer;

    margin-top: 10px;

    transition: background-color 0.3s; /* Smooth transition for hover effect */

}



.choose-time-btn:hover {

    background-color: #ffffff; /* Change button color on hover */

}



/* Responsive adjustments */

@media (max-width: 768px) {

    .employee-card {

        padding: 7px;

        height: 325px;

        margin-top: 0px;

    }

    

    .employee-card img {

            border-radius: 50%; /* Circular shape */

            width: 80px !important ; /* Fixed width */

            height: 80px; /* Fixed height to maintain aspect ratio */

            object-fit: cover;

            margin-bottom: 5px; /* Space below the image */

        }

            .employee-card h5 {

                font-size: 14px; /* Smaller font size on mobile */

                font-weight: bold; /* Make the name bold */

            }

            

            .price, .rating, .consultation-time {

            font-size: 12px;

            color: #555;

            

        }

        .employee-card p {

            line-height: normal !important; /* Reset any inherited line-height */

            font-size:12px;

            margin-bottom: 5px; /* Set a smaller or custom margin */

        }

        

        .choose-time-btn {

            background-color: #081351; /* Dark background for button */

            color: #fff;

            padding: 5px 10px;

            border: none;

            border-radius: 5px;

            cursor: pointer;

            margin-top: 5px;

            transition: background-color 0.3s; /* Smooth transition for hover effect */

        }

        

        



 



}



.selected-profession{

    display:none;

}

.owl-carousel .owl-dots .owl-dot{

    background-color:white !important;

    

}



.owl-theme .owl-dots .owl-dot span{

    color:#ffffff !important;

}



.owl-theme .owl-nav.disabled+.owl-dots{

    margin-bottom:20px !important;

}



.owl-item active{

    width:315px !important;

}



/*.owl-carousel .owl-dots .owl-dot{*/

/*    display:none !important;*/

   

/*}*/



#profession-text{

    display:none;

    position: relative;

    left: 135px;

    top: 55px;

    color: #081236;

    font-weight: bold;

    /*border-bottom: solid;*/

}



.carousel-container {

    position: relative;

}



.carousel-control {

    display:inline-block;

    position: absolute;

    top: 50%;

    /*transform: translateY(-50%);*/

    /*background-color: rgba(0, 0, 0, 0.5);*/

    /*color: #fff;*/

    border: none;

    padding: 10px 20px;

    cursor: pointer;

    z-index: 99;

}



.left-control {

    left: -100px;

    background-color:white;

}



.right-control {

    right: -100px;

     background-color:white;

}



.carousel-control:hover {

    background-color: white;

}



    

   

    

  /* Style for the profession filter buttons container */

.profession-filter {

    display: flex;

    justify-content: left;

    margin-bottom: 20px;

    /*border-bottom: 1px solid #ccc; */

}



/* Style for individual buttons (tabs) */

.filter-btn {

    background-color: transparent; /* Transparent background to match the tab style */

    color: #081351; /* Default text color */

    padding: 10px 5px; /* Padding around the button */

    margin: 0 3px; /* Margin between buttons */

    border: none; /* Remove the default border */

    border-bottom: 2px solid transparent; /* Creates the tab line effect */

    text-decoration: none; /* Remove underline */

    display: inline-block; /* Ensure buttons display inline */

    transition: border-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover and active */

    font-weight: bold; /* Bold text to look like a tab */

    cursor: pointer; /* Pointer cursor for tabs */

}



/* Hover effect for buttons */

.filter-btn:hover {

    color: #ffffff; /* Change text color on hover */

    border-bottom: 3px solid #ffffff; /* Highlight bottom border on hover */

}



/* Active button style (active tab) */

.filter-btn.active {

    color: #ffffff; /* Active tab text color */

    border-bottom: 3px solid #ffffff; /* Active tab bottom border */

}





    

    



#dropdown-links {

    display: none; /* Hidden by default */

    margin-top: 50px; /* Space above dropdown */

    position: absolute; /* Position relative to the parent */

    background-color: white; /* Background for dropdown */

    border: 1px solid #ddd; /* Border around dropdown */

    border-radius: 5px; /* Rounded corners */

    z-index: 99; /* Ensure it appears on top */

    width: 200px; /* Set a width for the dropdown */

    right:25px;

}



#dropdown-links .filter-btn {

    display: block; /* Make links display as block elements */

    margin: 5px 0; /* Spacing between links */

    padding: 10px; /* Padding for better touch targets */

    text-align: left; /* Align text to the left */

    color: black; /* Text color */

    text-decoration: none; /* Remove underline */

}



@media (max-width:768px) {

    .carousel-control{

            display:none;

        }

        

        .right-control{

            display:none;

        }

}



/* Desktop styles */

@media (min-width: 1024px) {

    /* Show the desktop filter section */

    .profession-filter {

        display: flex; /* Show for larger screens */

    }

    

    /* Hide the mobile filter section */

    .profession-filter-mobile {

        display: none; /* Hide for larger screens */

    }

    

    

}



/* Mobile styles */

@media (max-width: 1023px) {

    /* Hide the desktop filter section */

    .profession-filter {

        display: none; /* Hide for smaller screens */

    }



    /* Show the mobile filter section */

    .profession-filter-mobile {

        display: block; /* Show for smaller screens */

    }

    #profession-text{

        display:block;

        width: 40%;

        font-size: 15px;

        margin-bottom: 18px;

    }

    

    

    

}



#dropdown-links .filter-btn:hover {

    background-color: #f0f0f0; /* Highlight on hover */

}



#dropdown-links-mobile {

    display: none; /* Hidden by default */

    margin-top: 10px; /* Space above dropdown */

    position: absolute; /* Position relative to the parent */

    background-color: white; /* Background for dropdown */

    border: 1px solid #ddd; /* Border around dropdown */

    border-radius: 5px; /* Rounded corners */

    z-index: 99; /* Ensure it appears on top */

    width: 200px; /* Set a width for the dropdown */

}



.filter-btn-mobile {

    display: block; /* Stack buttons vertically */

    padding: 10px; /* Padding for each button */

    text-decoration: none; /* Remove underline */

    background-color:#081351;

    color:white;

    border-radius:7px;

}



.filter-btn-mobile_a{

    display: block; /* Make links display as block elements */

    margin: 5px 0; /* Spacing between links */

    padding: 10px; /* Padding for better touch targets */

    text-align: left; /* Align text to the left */

    color: black; /* Text color */

    text-decoration: none; /* Remove underline */

}





.filter-btn-mobile_a.active {

    background-color: #ffffff; /* Example active state */

    color: white; /* Example active text color */

}





 .profile-container {

       background-color: #fff;

       border-radius: 10px;

       padding: 20px;

       margin-top: 20px;

       margin-bottom:20px;

       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

   }



   .profile-image {

       width: 100%;

       height: 350px;

       object-fit: cover;

       margin-top: 25px;

   }



   .profile-container h2 {

       color: #000;

       font-weight: 700;

       margin-bottom:0px;

   }

   /*.proffession{*/

   /*        font-size: 18px;*/

   /*         color: #444;*/

            /* margin-top: 10px; */

   /*         margin-bottom: 0px;*/

   /*         font-style: italic;*/

   /*}*/



   .employee-header {

       font-size: 17px;

       margin-top: 5px;

   }



   .skills-section {

       margin-top: 10px;

   }



   .skills-badge {

       display: inline-block;

       background-color: #f7f7f7;

       border: 1px solid #ddd;

       padding: 5px 10px;

       margin: 5px;

       border-radius: 25px;

   }



   .profile-container h5 {

       font-size: 18px;

       color: #444;

       margin-top: 10px;

       margin-bottom:0px;

       

   }



   .section-title {

       font-weight: 600;

       margin-top: 30px;

   }



   .education-section {

       font-size: 16px;

       margin-top: 20px;

       margin-left: 20px;

   }



   .education-entry {

       margin-bottom: 20px;

   }



   .education-entry p {

       margin: 5px 0;

   }



   .degree {

       font-weight: bold;

   }



   .institute-name {

       color: #444;

   }



   .education-duration {

       float: right;

       color: #777;

   }



   .experience-section {

       margin-top: 20px;

   }



   .experience-entry {

       margin-bottom: 30px;

       padding-left: 20px;

       position: relative;

       border-left: 2px dotted #ffffff;

   }



   .experience-entry::before {

       content: '';

       position: absolute;

       left: -6px;

       top: 0;

       width: 12px;

       height: 12px;

       background-color: #ffffff;

       border-radius: 50%;

   }



   .experience-company {

       font-weight: 600;

       font-size: 18px;

       display: inline-block;

   }



   .experience-role {

       font-style: italic;

       color: #777;

       font-size: 16px;

   }



   .experience-duration {

       float: right;

       color: #444;

       font-size: 14px;

       position: relative;

   }



   .experience-description {

       margin-top: 10px;

   }



   .experience-description ul {

       margin-left: 30px;

       line-height: 2.5rem;

       list-style-type: disc;

   }



   .experience-description li {

       margin-bottom: 10px;

       color: #333;

   }



   .technologies-used {

       font-style: italic;

       font-size: 14px;

       color: #666;

       margin-top: 5px;

   }



   .certifications-section {

       margin-top: 20px;

   }



   .certification-entry {

       margin-bottom: 20px;

       padding-left: 20px;

       position: relative;

   }



   .certification-name {

       font-weight: bold;

       display: inline-block;

   }



   .certification-duration {

       float: right;

       color: #555;

       font-size: 14px;

   }



   .certifying-company {

       font-size: 14px;

       color: #777;

       margin-top: 5px;

   }



   .info-container {

       display: flex;

       flex-direction: column;

       align-items: flex-start;

       gap: 20px;

       padding: 20px;

       background-color: #fff;

       border-radius: 10px;

       margin-top: 20px;

   }



   .info-item {

       display: flex;

       flex-direction: column;

       align-items: flex-start;

       background-color: #f4f4f4;

       padding: 20px;

       border-radius: 10px;

       width: 100%;

   }



   .profile-container h3 {

       color: #000;

       margin-top: 20px;

       

   }

   

   .profile-container h4 {

       color: #000;

       margin: 0px;

       

   }



   .profile-container p {

       font-size: 16px;

       color: #333;

       margin: 0;

   }



   .skills-container {

       background: #fff;

       padding: 20px;

       border-radius: 8px;

       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

   }



   .skills-list {

       margin-bottom: 15px;

   }



   .skill {

       display: inline-block;

       background-color: #e9ecef;

       border-radius: 20px;

       padding: 5px 10px;

       margin: 5px ;

   }