:root {


--primary: #00a0a0;


--secondary: #2563eb;


--accent: #0284c7;


--light: #f0fdfd;


--dark: #0f172a;


}






html {


scroll-behavior: smooth;


}






body {


font-family: 'Poppins', sans-serif;


color: #333;


overflow-x: hidden;


}






.bg-primary {


background-color: var(--primary);


}






.bg-secondary {


background-color: var(--secondary);


}






.bg-accent {


background-color: var(--accent);


}






.text-primary {


color: var(--primary);


}






.text-secondary {


color: var(--secondary);


}






.border-primary {


border-color: var(--primary);


}






.btn-primary {


background-color: var(--primary);


color: white;


transition: all 0.3s ease;


}






.btn-primary:hover {


background-color: #008080;


transform: translateY(-2px);


box-shadow: 0 10px 15px -3px rgba(0, 160, 160, 0.3);


}






.btn-secondary {


background-color: var(--secondary);


color: white;


transition: all 0.3s ease;


}






.btn-secondary:hover {


background-color: #1e40af;


transform: translateY(-2px);


box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);


}






.section {
  padding: 5rem 1rem;
  
}






.card {


transition: all 0.3s ease;


}






.card:hover {


transform: translateY(-5px);


box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);


}






.service-card {


border-left: 4px solid var(--primary);


transition: all 0.3s ease;


}






.service-card:hover {


border-left: 8px solid var(--primary);


transform: translateX(5px);


}






.testimonial-card {


transition: all 0.3s ease;


}






.testimonial-card:hover {


transform: scale(1.03);


}






.qualification-item {


position: relative;


padding-left: 28px;


}






.qualification-item:before {


content: '';


position: absolute;


left: 0;


top: 8px;


width: 14px;


height: 14px;


border-radius: 50%;


background-color: var(--primary);


}






.qualification-item:after {


content: '';


position: absolute;


left: 7px;


top: 22px;


width: 2px;


height: calc(100% - 14px);


background-color: var(--primary);


}






.qualification-item:last-child:after {


display: none;


}






.reveal {


opacity: 0;


transform: translateY(30px);


transition: all 0.8s ease;


}






.reveal.active {


opacity: 1;


transform: translateY(0);


}






/* Gradient backgrounds */


.bg-gradient-primary {


background: linear-gradient(135deg, var(--primary), var(--secondary));


}






.bg-gradient-light {


background: linear-gradient(135deg, #f0fdfd, #e0f7fa);


}






/* Pulse animation for CTA buttons */


@keyframes pulse {


0% { box-shadow: 0 0 0 0 rgba(0, 160, 160, 0.7); }


70% { box-shadow: 0 0 0 10px rgba(0, 160, 160, 0); }


100% { box-shadow: 0 0 0 0 rgba(0, 160, 160, 0); }


}






.pulse {


animation: pulse 2s infinite;


}






/* Smooth scroll for single page */


.smooth-scroll {


scroll-behavior: smooth;


}






/* Override Tailwind for PDF optimization */


{


.section {


page-break-inside: avoid;


padding: 2rem 1rem;


}






body {


width: 100%;


margin: 0;


padding: 0;


}


}






/* Mobile menu */


#mobile-menu {


transition: transform 0.3s ease-in-out;


transform: translateX(-100%);


}






#mobile-menu.show {


transform: translateX(0);


}






/* Form styling */


input:focus, textarea:focus {


border-color: var(--primary);


outline: none;


box-shadow: 0 0 0 3px rgba(0, 160, 160, 0.2);


}






/* Video container for responsive videos */


.video-container {


position: relative;


padding-bottom: 56.25%;


height: 0;


overflow: hidden;


}






.video-container iframe {


position: absolute;


top: 0;


left: 0;


width: 100%;


height: 100%;


border-radius: 0.5rem;


}






/* Company logo styles */


.company-logo {


filter: grayscale(100%);


opacity: 0.7;


transition: all 0.3s ease;


}






.company-logo:hover {


filter: grayscale(0%);


opacity: 1;


}






/* Map container */


.map-container {


position: relative;


height: 400px;


width: 100%;


border-radius: 0.5rem;


overflow: hidden;


}






/* Logo carousel */


.logo-carousel {


display: flex;


overflow-x: auto;


scroll-behavior: smooth;


scrollbar-width: none; /* Firefox */


-ms-overflow-style: none; /* IE and Edge */


}






.logo-carousel::-webkit-scrollbar {


display: none; /* Chrome, Safari, Opera */


}






.logo-carousel-item {


flex: 0 0 auto;


width: 180px;


margin-right: 1.5rem;


}
/* Ensure icon visibility */
i {
    display: inline-block;
    line-height: 1;
}

/* Match Expertise section styling */
.expertise-card, .service-card, .benefit-card {
    transition: all 0.3s ease;
}

.expertise-card:hover, .service-card:hover, .benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}
.table-container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 1.5rem;
            text-align: left;
            border-bottom: 1px solid #e5e7eb;
        }

        th {
            background-color: var(--primary);
            color: white;
            font-weight: 600;
        }

        td {
            background-color: white;
            transition: all 0.3s ease;
        }

        tr:hover td {
            background-color: var(--light);
            transform: translateY(-2px);
        }

        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        @media (max-width: 640px) {
            th, td {
                padding: 1rem;
                font-size: 0.9rem;
            }
        }
   .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            background-color: #e5e7eb; /* Placeholder background */
        }

        .gallery-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
        }

        .gallery-item img {
            width: 100%;
            height: 256px;
            object-fit: cover;
            display: block;
            transition: transform 0.3s ease;
        }

        .gallery-item img:not([src]), .gallery-item img[src=""] {
            background-color: #e5e7eb;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-size: 1rem;
            text-align: center;
        }

        .gallery-item:hover img:not([src=""]) {
            transform: scale(1.05);
        }

        .gallery-item .overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.4);
            opacity: 0;
            transition: opacity 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .gallery-item:hover .overlay {
            opacity: 1;
        }

        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        .error-message {
            display: none;
            color: #dc2626;
            text-align: center;
            margin-top: 1rem;
            font-size: 1.1rem;
        }

        @media (max-width: 640px) {
            .gallery-item img {
                height: 200px;
            }
        }
 blockquote {
        border-left: 4px solid var(--primary);
        padding-left: 1rem;
        font-style: italic;
        color: var(--dark);
        background-color: #e0f7fa;
    }
 .specialty-badge {
        background-color: var(--secondary);
        color: white;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 0.8rem;
        margin: 2px;
        display: inline-block;
    }
  .rating {
        color: #FFD700; /* Keeping gold color for star ratings */
    }