body{
    background-color: #eeeeee;
}
/* ////////banner/////////////////// */

.banner {
            width: 100%;
            height: 400px;
            background-image: url('../images/About-back-img.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        
        
        .breadcrumb {
            display: flex;
            align-items: center;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 15px 25px;
            border-radius: 30px;
            z-index: 1;
            margin-top: 80px;
        }
        
        .breadcrumb a {
            text-decoration: none;
            color: #333;
            font-size: 18px;
            display: flex;
            align-items: center;
        }
        
        .breadcrumb a:hover {
            color: #000;
        }
        
        .breadcrumb-separator {
            margin: 0 10px;
            color: #333;
            font-size: 18px;
        }
        
        .breadcrumb-current {
            color: #333;
            font-size: 18px;
            font-weight: bold;
        }
        
        /* Mobile Responsive */
        @media (max-width: 768px) {
            .banner {
                height: 400px;
            }
            
            .breadcrumb {
                padding: 12px 20px;
            }
            
            .breadcrumb a,
            .breadcrumb-separator,
            .breadcrumb-current {
                font-size: 16px;
            }
        }
  




        /* ////////////Services details//////// */


         .container {
             max-width: 1200px;
             margin: 40px auto;
             padding: 0 15px;
             display: flex;
             flex-wrap: wrap;
             gap: 20px;
         }
 
         .heading {
             width: 100%;
             text-align: center;
             padding: 20px 0;
             margin-bottom: 20px;
             margin-top: 30px;
         }
 
         .heading h2 {
             margin: 0;
             font-size: 2em;
             color: #555;
             text-transform: uppercase;
         }
 
         .main-content {
             flex: 3;
             min-width: 300px;
             background-color: #fff;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         }

         .main-content-text{
            padding: 30px 40px;
         }
 
         .main-content img {
             max-width: 100%;
             height: auto;
             display: block;
             margin-bottom: 20px;
         }
 
         .main-content h2 {
             font-size: 1.7em;
             color: #444;
             margin-top: 0;
             margin-bottom: 15px;
         }
 
         .main-content h3 {
             font-size: 1.3em;
             color: #555;
             margin-top: 20px;
             margin-bottom: 10px;
         }
         .main-content h4 {
             font-size: 1.1em;
             color: #555;
             margin-top: 20px;
             margin-bottom: 10px;
         }
 
         .main-content p {
             line-height: 1.5;
             margin-bottom: 15px;
             color: #666;
         }
 
         .main-content ul {
             list-style: disc;
             padding-left: 20px;
             margin-bottom: 15px;
             color: #666;
         }
 
         .main-content ul li {
             margin-bottom: 5px;
         }
 
         .sidebar {
             flex: 1;
             min-width: 250px;
             background-color: #fff;
             padding: 20px;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             height: fit-content; /* Adjust based on content */
         }
 
         .sidebar h3 {
             font-size: 1.3em;
             color: #444;
             margin-top: 0;
             margin-bottom: 15px;
             border-bottom: 1px solid #eee;
             padding-bottom: 10px;
         }
 
         .sidebar ul {
             list-style: none;
             padding: 0;
             margin: 0;
         }
 
         .sidebar ul li {
             margin-bottom: 10px;
         }
 
         .sidebar ul li a {
             text-decoration: none;
             color: #007bff;
             display: block;
             padding: 8px 0;
             transition: color 0.3s ease;
         }
 
         .sidebar ul li a:hover {
             color: #0056b3;
         }
 
         /* Responsive adjustments */
         @media (max-width: 768px) {
             .container {
                 flex-direction: column;
                 margin: 10px auto;
             }
 
             .main-content, .sidebar {
                 padding: 15px;
             }
 
             .heading h2 {
                 font-size: 1.5em;
             }
 
             .main-content h2 {
                 font-size: 1.5em;
             }
 
             .main-content h3 {
                 font-size: 1.2em;
             }
 
             .sidebar {
                 order: -1; /* Move sidebar above main content in mobile view */
             }
             .main-content-text{
                padding: 10px;
             }
         }
 
         @media (max-width: 480px) {
             .heading h2 {
                 font-size: 1.2em;
             }
 
             .main-content h2 {
                 font-size: 1.3em;
             }
 
             .main-content h3 {
                 font-size: 1em;
             }
 
             .main-content p {
                 font-size: 0.9em;
             }
         }