 :root {
            --primary: #2563eb;
            --primary-dark: #1e40af;
            --secondary: #f59e0b;
            --dark: #1f2937;
            --light: #f3f4f6;
            --gray: #6b7280;
        }.services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
        }
        .service-link {
            color: var(--primary);
            font-weight: 500;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: color 0.3s;
        }
        
        .service-card {
            background: white;
            border-radius: 12px;
            padding: 2.5rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            border: 1px solid rgba(0, 0, 0, 0.03);
        }
        
        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .service-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .service-content h3 {
            font-size: 1.4rem;
            color: var(--dark);
            margin-bottom: 1rem;
            font-weight: 600;
        }
        
       
        
        @media (max-width: 768px) {
            .services-grid {
                grid-template-columns: 1fr;
            }
            
            .section-header h2 {
                font-size: 2rem;
            }
            
            .service-card {
                padding: 2rem;
            }
        }


        .contact-info {
    padding: 20px;
    background: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.contact-info h2 {
    font-size: 2rem;
    color: #ff6600; /* Orange */
    font-weight: 700;
    margin-bottom: 20px;
    font-family: "Alegreya Sans", sans-serif;
    font-style: italic;
}

.info-card {
    display: flex;
    align-items: center;
    background: #ffe6cc; /* Light orange background */
    padding: 15px 20px;
    margin-bottom: 15px;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.info-card:hover {
    background: #ffcc99; /* Darker orange on hover */
    transform: translateY(-5px);
}

.info-icon {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #ff6600; /* Orange */
    margin-right: 15px;
}

.info-icon i {
    font-size: 1.5rem;
    color: #fff;
}

.info-content h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333; /* Dark text */
    margin-bottom: 5px;
}

.info-content p {
    font-size: 1rem;
    color: #666; /* Muted text */
    margin: 0;
}

.info-content a {
    color: #ff6600; /* Orange links */
    transition: color 0.3s ease;
    text-decoration: none;
}

.info-content a:hover {
    color: #cc5200; /* Darker orange on hover */
}
 @media (max-width: 768px){
    .btn-100{
        width: 100%;
    }
    .h1 {
            font-size: 1.5rem !important;
           
        }
        
        .p {
            font-size: 1rem;
            margin-bottom: 30px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        }
        h2{
             font-size: 2.5rem !important; 
        }
 }