:root {

            --primary-color: #2c3e50;

            --secondary-color: #3498db;

            --secondary-color: #b776ff;

            --accent-color: #e74c3c;

            --light-color: #ecf0f1;

            --dark-color: #2c3e50;

            --gradient: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);

        }



        body {

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

            overflow-x: hidden;

            color: #333;

        }



        .navbar {

            background: rgba(44, 62, 80, 0.9) !important;

            backdrop-filter: blur(10px);

            transition: all 0.3s ease;

        }



        .navbar.scrolled {

            background: var(--primary-color) !important;

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

        }



        .navbar-brand img {

            height: 80px;

            border-radius: 50%;

        }



        .bg-transparent {

            --bs-bg-opacity: 1;

            background-color: #ffffff73 !important;

        }



        .hero-section {

            background: var(--gradient);

            color: white;

            padding: 120px 0 80px;

            position: relative;

            overflow: hidden;

        }



        .hero-section::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: url('https://images.unsplash.com/photo-1521791136064-7986c2920216?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80') no-repeat center center/cover;

            background: url('../images/hero.jpg');

            /* background: url('https://images.pexels.com/photos/2044434/pexels-photo-2044434.jpeg?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80'); */

            opacity: 0.2;

            z-index: 0;

        }



        .hero-content {

            position: relative;

            z-index: 1;

        }



        .section-title {

            position: relative;

            margin-bottom: 50px;

            text-align: center;

        }



        .section-title::after {

            content: '';

            position: absolute;

            bottom: -15px;

            left: 50%;

            transform: translateX(-50%);

            width: 80px;

            height: 3px;

            background: var(--secondary-color);

        }



        .service-card {

            border: none;

            border-radius: 10px;

            overflow: hidden;

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

            transition: all 0.3s ease;

            margin-bottom: 30px;

            background: white;

        }



        .service-card:hover {

            transform: translateY(-10px);

            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);

        }



        .service-icon {

            font-size: 2.5rem;

            color: var(--secondary-color);

            margin-bottom: 20px;

        }



        .about-section {

            background: url('https://images.unsplash.com/photo-1450101499163-c8848c66ca85?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover;

            background: url('https://images.pexels.com/photos/2044434/pexels-photo-2044434.jpeg?_gl=1*10de5xq*_ga*MzU3MjI3NzQuMTc1MzA5OTE5Ng..*_ga_8JE65Q40S6*czE3NTUzMzI1OTUkbzI0JGcxJHQxNzU1MzMyNjIyJGozMyRsMCRoMA..')  no-repeat center center/cover;

            background-attachment: fixed;

            position: relative;

            color: white;

            padding: 100px 0;

        }



        .about-section::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: rgba(44, 62, 80, 0.8);

            z-index: 0;

        }



        .about-content {

            position: relative;

            z-index: 1;

        }



        .testimonial-card {

            background: white;

            border-radius: 10px;

            padding: 30px;

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

            margin: 15px;

            position: relative;

        }



        .testimonial-card::before {

            content: '\201C';

            font-size: 5rem;

            color: rgba(52, 152, 219, 0.1);

            position: absolute;

            top: 10px;

            left: 20px;

            font-family: serif;

        }



        .testimonial-img {

            width: 70px;

            height: 70px;

            border-radius: 50%;

            object-fit: cover;

            border: 3px solid var(--secondary-color);

        }



        .gallery-item {

            margin-bottom: 30px;

            overflow: hidden;

            border-radius: 10px;

            position: relative;

        }



        .gallery-item img {

            transition: all 0.5s ease;

            width: 100%;

            height: 250px;

            object-fit: cover;

        }



        .gallery-item:hover img {

            transform: scale(1.1);

        }



        .gallery-overlay {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background: rgba(44, 62, 80, 0.7);

            display: flex;

            align-items: center;

            justify-content: center;

            opacity: 0;

            transition: all 0.3s ease;

        }



        .gallery-item:hover .gallery-overlay {

            opacity: 1;

        }



        .contact-section {

            background: var(--light-color);

            padding: 100px 0;

        }



        .contact-form {

            background: white;

            padding: 40px;

            border-radius: 10px;

            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

        }



        .form-control {

            height: 50px;

            border-radius: 5px;

            margin-bottom: 20px;

        }



        textarea.form-control {

            height: auto;

        }



        .btn-primary {

            background: var(--secondary-color);

            border: none;

            padding: 12px 30px;

            font-weight: 600;

            transition: all 0.3s ease;

        }



        .btn-primary:hover {

            background: var(--primary-color);

            transform: translateY(-3px);

        }



        .footer {

            background: var(--dark-color);

            color: white;

            padding: 60px 0 20px;

        }



        .footer-links a {

            color: #bbb;

            text-decoration: none;

            transition: all 0.3s ease;

            display: block;

            margin-bottom: 10px;

        }



        .footer-links a:hover {

            color: white;

            transform: translateX(5px);

        }



        .social-icons a {

            display: inline-block;

            width: 40px;

            height: 40px;

            background: rgba(255, 255, 255, 0.1);

            border-radius: 50%;

            text-align: center;

            line-height: 40px;

            color: white;

            margin-right: 10px;

            transition: all 0.3s ease;

        }



        .social-icons a:hover {

            background: var(--secondary-color);

            transform: translateY(-5px);

        }



        .certification-badge {

            background: white;

            padding: 15px;

            border-radius: 5px;

            display: inline-block;

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

            margin: 10px;

        }



        .certification-badge img {

            height: 60px;

        }



        /* Animation classes */

        .fade-in {

            animation: fadeIn 1s ease-in;

        }



        @keyframes fadeIn {

            from {

                opacity: 0;

            }



            to {

                opacity: 1;

            }

        }



        .slide-in-left {

            animation: slideInLeft 1s ease-out;

        }



        @keyframes slideInLeft {

            from {

                transform: translateX(-100px);

                opacity: 0;

            }



            to {

                transform: translateX(0);

                opacity: 1;

            }

        }



        .slide-in-right {

            animation: slideInRight 1s ease-out;

        }



        @keyframes slideInRight {

            from {

                transform: translateX(100px);

                opacity: 0;

            }



            to {

                transform: translateX(0);

                opacity: 1;

            }

        }



        .pulse {

            animation: pulse 2s infinite;

        }



        @keyframes pulse {

            0% {

                transform: scale(1);

            }



            50% {

                transform: scale(1.05);

            }



            100% {

                transform: scale(1);

            }

        }



        /* Responsive adjustments */

        @media (max-width: 768px) {

            .hero-section {

                padding: 100px 0 60px;

            }



            .section-title {

                margin-bottom: 30px;

            }

        }