:root {
            --primary: #2c3e50;
            --secondary: #3498db;
            --accent: #e74c3c;
            --success: #27ae60;
            --light: #f8f9fa;
            --dark: #2c3e50;
            --gradient-primary: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
            --gradient-accent: linear-gradient(135deg, #e74c3c 0%, #f39c12 100%);
            --shadow: 0 10px 30px rgba(0,0,0,0.1);
            --shadow-hover: 0 20px 40px rgba(0,0,0,0.15);
			 --light-bg: #f8f9fa;
			  --accent-color: #ff6b35;
			 --card-shadow: 0 5px 15px rgba(0,0,0,0.08);
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
			
			
			
       
            --warning: #f39c12;
            --info: #17a2b8;
            --steel-blue: #4682b4;
            --stem-green: #2ecc71;
            --ai-purple: #9b59b6;
            --tinkering-orange: #e67e22;
            --training-teal: #1abc9c;
            
            --gradient-ste: linear-gradient(135deg, #3498db 0%, #2ecc71 100%);
            --gradient-robotics: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
            --gradient-stem: linear-gradient(135deg, #2ecc71 0%, #3498db 100%);
            --gradient-ai: linear-gradient(135deg, #9b59b6 0%, #3498db 100%);
            --gradient-tinkering: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
            --gradient-training: linear-gradient(135deg, #1abc9c 0%, #3498db 100%);
 
           
			
         }
		 
		 
         

		 
		 
         /* Hero Section */
         .page-header-v1 {
            background: var(--gradient-primary);
            padding: 100px 0 80px;
            position: relative;
            overflow: hidden;
            margin-bottom: 0;
         }
         
         .page-header-v1::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.1)" d="M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,202.7C672,203,768,181,864,165.3C960,149,1056,139,1152,149.3C1248,160,1344,192,1392,208L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
            background-size: cover;
            opacity: 0.3;
         }
         
         .page-title {
            font-size: 3.5rem;
            font-weight: 800;
            color: white;
            text-shadow: 2px 2px 10px rgba(0,0,0,0.2);
            margin-bottom: 20px;
            animation: fadeInUp 1s ease;
         }
         
         .breadcrumbs {
            color: rgba(255,255,255,0.9);
            font-size: 1.1rem;
         }
         
         .breadcrumbs a {
            color: white;
            text-decoration: none;
            transition: var(--transition);
            position: relative;
         }
         
         .breadcrumbs a:hover {
            color: var(--accent);
            padding-left: 5px;
         }
         
         .breadcrumbs .separator {
            margin: 0 15px;
            color: rgba(255,255,255,0.6);
         }
          .coordinator-features {
            background: white;
            padding: 30px;
            border-radius: 15px;
            margin-bottom: 30px;
            box-shadow: var(--card-shadow);
         }
         /* Section Styling */
         .section-padding {
            padding: 70px 0;
         }
         
         .section-title {
            font-size: 2.8rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 20px;
            position: relative;
            
         }
         
         .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: var(--accent);
            border-radius: 2px;
         }
         
         .section-subtitle {
            font-size: 1rem;
            color: #666;
            max-width: 800px;
            margin: 0 auto 60px;
            line-height: 1.8;
         }
         
         /* Cards Styling */
         .card {
            border: none;
            border-radius: 20px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            overflow: hidden;
            height: 100%;
            margin-bottom: 30px;
            position: relative;
            background: white;
         }
         
         .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: var(--gradient-accent);
         }
         
         .card:hover {
            transform: translateY(-15px);
            box-shadow: var(--shadow-hover);
         }
         
         .card-body {
            padding: 20px;
         }
         
         .card-title {
            color: var(--primary);
            font-size: 1.6rem;
            font-weight: 700;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            gap: 12px;
         }
         
         .card-title i {
            color: var(--secondary);
            font-size: 1.8rem;
            background: rgba(52, 152, 219, 0.1);
            width: 50px;
            height: 50px;           
            display: flex;
            align-items: center;
            justify-content: center;
         }
         
         .list-group {
            border: none;
         }
         
         .list-group-item {
            border: none;
            padding: 10px 0;
            background: transparent;
            color: #555;          
            position: relative;
            padding-left: 25px;
         }
         
         .list-group-item::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--success);
            font-weight: bold;
            font-size: 1.2rem;
         }
         
         /* Form Section */
         .form-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            position: relative;
            overflow: hidden;
         }
         
         .form-section::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 300px;
            height: 300px;
            background: var(--gradient-primary);
            border-radius: 50%;
            transform: translate(150px, -150px);
            opacity: 0.1;
         }
         
         .form-section::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 400px;
            height: 400px;
            background: var(--gradient-accent);
            border-radius: 50%;
            transform: translate(-200px, 200px);
            opacity: 0.1;
         }
         
         .contact-form-area {
            position: relative;
            z-index: 1;
         }
         
         .form-wrap {
            background: white;
            padding: 60px;
            border-radius: 25px;
            box-shadow: var(--shadow);
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
         }
         
         .form-wrap::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: var(--gradient-accent);
         }
         
         .form-wrap h3 {
            font-size: 2.2rem;
            color: var(--primary);
            margin-bottom: 15px;
            font-weight: 700;
         }
         
         .form-wrap p {
            color: #666;
            font-size: 1.1rem;
            margin-bottom: 40px;
         }
         
         /* Form Elements */
     
         
         .form-group label {
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 8px;
            display: block;
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
         }
         
         .required {
            color: var(--accent);
         }
         
         
         
     
         
        
         
         /* Error Message */
         .alert-message {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
            color: white;
            padding: 20px 30px;
            border-radius: 15px;
            margin-bottom: 40px;
            text-align: center;
            font-weight: 600;
            animation: slideInDown 0.5s ease;
            box-shadow: 0 10px 20px rgba(238, 90, 82, 0.2);
            border: none;
            position: relative;
            overflow: hidden;
         }
         
         .alert-message::before {
            content: '⚠';
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.5rem;
         }
         
         /* Success Message */
         .success-message {
            background: linear-gradient(135deg, #27ae60 0%, #219653 100%);
            color: white;
            padding: 20px 30px;
            border-radius: 15px;
            margin-bottom: 40px;
            text-align: center;
            font-weight: 600;
            animation: slideInDown 0.5s ease;
            box-shadow: 0 10px 20px rgba(33, 150, 83, 0.2);
            border: none;
            position: relative;
            overflow: hidden;
         }
         
         .success-message::before {
            content: '✓';
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.5rem;
         }
         
         /* Recaptcha */
         .g-recaptcha {
            margin-top: 25px;
            transform: scale(0.95);
            transform-origin: 0 0;
         }
		 
		 /* Lab Navigation Tabs */
        .lab-nav-tabs {
            background: white;
            border-radius: 20px;
            padding: 20px;
            box-shadow: var(--shadow);
            margin-bottom: 50px;
        }

        .nav-tabs-ste {
            border: none;
            justify-content: center;
        }

        .nav-tabs-ste .nav-link {
            border: none;
            border-radius: 50px;
            padding: 15px 30px;
            margin: 0 10px;
            font-weight: 600;
            color: var(--primary);
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .nav-tabs-ste .nav-link.active {
            background: var(--gradient-ste);
            color: white;
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(52, 152, 219, 0.3);
        }

        .nav-tabs-ste .nav-link:hover:not(.active) {
            background: rgba(52, 152, 219, 0.1);
        }

        /* Lab Briefing Cards */
        .lab-briefing-section {
            padding: 50px 0 100px;
        }

        .lab-briefing-card {
            background: white;
            border-radius: 25px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            height: 100%;
            border: 2px solid transparent;
            background-clip: padding-box;
        }

        .lab-briefing-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
        }

        .lab-header {
            padding: 40px 40px 20px;
            position: relative;
            overflow: hidden;
        }

        .lab-icon {
            width: 80px;
            height: 80px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            color: white;
            margin-bottom: 25px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }

        .lab-badge {
            background: rgba(255,255,255,0.2);
            color: white;
            padding: 8px 20px;
            border-radius: 30px;
            font-size: 0.9rem;
            font-weight: 600;
            letter-spacing: 1px;
            display: inline-block;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.2);
        }

        .lab-title {
            font-size: 2.2rem;
            font-weight: 800;
            color: white;
            margin: 15px 0;
            text-shadow: 2px 2px 10px rgba(0,0,0,0.2);
        }

        .lab-subtitle {
            color: rgba(255,255,255,0.9);
            font-size: 1.1rem;
            margin-bottom: 25px;
        }

        .lab-content {
            padding: 20px;
        }

        .lab-overview {
            font-size: 1.1rem;
            color: #555;
            line-height: 1.8;
            margin-bottom: 30px;
            padding-bottom: 5px;
            border-bottom: 2px solid #f0f0f0;
        }

        /* Features Grid */
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }

        .feature-card {
            background: #f8fafc;
            border-radius: 15px;
            padding: 25px;
            transition: var(--transition);
            border-left: 4px solid;
        }

        .feature-card:hover {
            background: white;
            transform: translateY(-5px);
            box-shadow: var(--card-shadow);
        }

        .feature-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: white;
            margin-bottom: 15px;
        }

        .feature-card h5 {
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 10px;
            color: var(--primary);
        }

        /* Technical Specs */
        .tech-specs {
            background: linear-gradient(135deg, #f8fafc 0%, #e8f4fc 100%);
            border-radius: 20px;
            padding: 30px;
            margin: 30px 0;
        }

        .spec-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            padding: 12px 20px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
        }

        .spec-icon {
            width: 40px;
            height: 40px;
            background: var(--gradient-ste);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            flex-shrink: 0;
        }

        /* Learning Outcomes */
        .outcomes-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }

        .outcome-item {
            background: white;
            padding: 15px;
            border-radius: 12px;
            box-shadow: 0 3px 15px rgba(0,0,0,0.05);
            display: flex;
            align-items: center;
            gap: 12px;
            transition: var(--transition);
        }

        .outcome-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }

        .outcome-icon {
            color: var(--success);
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        /* Target Audience */
        .audience-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 15px 0;
        }

        .audience-tag {
            background: rgba(52, 152, 219, 0.1);
            color: var(--secondary);
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
            border: 2px solid rgba(52, 152, 219, 0.2);
        }

         
         /* Animation Classes */
         @keyframes fadeInUp {
            from {
               opacity: 0;
               transform: translateY(30px);
            }
            to {
               opacity: 1;
               transform: translateY(0);
            }
         }
         
         @keyframes slideInDown {
            from {
               opacity: 0;
               transform: translateY(-30px);
            }
            to {
               opacity: 1;
               transform: translateY(0);
            }
         }
         
         .animate-card {
            animation: fadeInUp 0.6s ease forwards;
            opacity: 0;
         }
         
         .animate-card:nth-child(1) { animation-delay: 0.1s; }
         .animate-card:nth-child(2) { animation-delay: 0.2s; }
         .animate-card:nth-child(3) { animation-delay: 0.3s; }
         .animate-card:nth-child(4) { animation-delay: 0.4s; }
         
         /* Responsive Design */
         @media (max-width: 768px) {
            .page-title {
               font-size: 2.5rem;
            }
            
            .section-title {
               font-size: 2.2rem;
            }
            
            .section-padding {
               padding: 60px 0;
            }
            
            .form-wrap {
               padding: 30px 20px;
            }
            
            .card-title {
               font-size: 1.4rem;
            }
            
            .card-title i {
               width: 40px;
               height: 40px;
               font-size: 1.5rem;
            }
            
            .submit {
               padding: 15px 40px;
               width: 100%;
            }
            
            .padrt, .padlt {
               padding-right: 15px !important;
               padding-left: 15px !important;
            }
         }
         
		 .mb-30{margin-bottom: 30px!important; }
		 .mb-3{margin-bottom: 15px!important; }
		 .mb-4{margin-bottom: 20px!important; }
		 
		  .feature-item {
           
            align-items: center;
            margin-bottom: 15px;
         }
		 
         /* Custom Scrollbar */
         ::-webkit-scrollbar {
            width: 10px;
         }
         
         ::-webkit-scrollbar-track {
            background: #f1f1f1;
         }
         
         ::-webkit-scrollbar-thumb {
            background: var(--secondary);
            border-radius: 5px;
         }
         
         ::-webkit-scrollbar-thumb:hover {
            background: var(--primary);
         }
         
         /* Floating Elements */
         .floating-element {
            position: absolute;
            width: 100px;
            height: 100px;
            background: var(--gradient-primary);
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            opacity: 0.1;
            animation: float 20s infinite ease-in-out;
         }
         
         .floating-element:nth-child(1) {
            top: 10%;
            left: 5%;
            animation-delay: 0s;
         }
         
         .floating-element:nth-child(2) {
            top: 60%;
            right: 10%;
            animation-delay: 5s;
            background: var(--gradient-accent);
         }
         
         @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
         }
		 
		 .role-icon {
            width: 60px;
            height: 60px;
            background: var(--light-bg);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            color: var(--primary-color);
            font-size: 24px;
         }
         
         .badge-custom {
            background: var(--accent-color);
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.8rem;
            margin-left: 10px;
         } 
		

 .membership-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 30px 15px;
            text-align: center;
            box-shadow: var(--shadow);
            transition: var(--transition);
            height: 100%;
            position: relative;
            overflow: hidden;
            border: 2px solid transparent;
            background: linear-gradient(white, white) padding-box,
                        var(--gradient-primary) border-box;
        }
    .border-top{margin-top: 20px;}    
        .membership-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: var(--gradient-primary);
            opacity: 0;
            transition: var(--transition);
        }
        
        .membership-card:hover {
            transform: translateY(-20px);
            box-shadow: var(--shadow-hover);
        }
        
        .membership-card:hover::before {
            opacity: 1;
            animation: slideIn 0.5s ease;
        }
        
        @keyframes slideIn {
            from { width: 0; }
            to { width: 100%; }
        }
        
        .membership-card i {
            font-size: 3.5rem;
            color: var(--secondary);
            margin-bottom: 25px;
            display: inline-block;
            background: linear-gradient(135deg, var(--secondary), var(--primary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            transition: var(--transition);
        }
        
        .membership-card:hover i {
            transform: scale(1.2) rotate(5deg);
        }
        
        .membership-card h3 {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 15px;
        }
        
        .membership-card h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 2px;
            background: var(--accent);
            transition: var(--transition);
        }
        
        .membership-card:hover h3::after {
            width: 100px;
        }
        
        .membership-card p {
            color: #666;
            line-height: 1.7;
            font-size: 1.05rem;
            margin-bottom: 0;
        }
        
        /* Benefits List */
        .benefits-list {
            background: white;
            border-radius: var(--border-radius);
            padding: 40px;
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
        }
        
        .benefits-list::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: var(--gradient-accent);
        }
        
        .benefits-list li {
            padding: 15px 0;
            border-bottom: 1px solid rgba(0,0,0,0.1);
            font-size: 1.1rem;
            display: flex;
            align-items: flex-start;
            gap: 15px;
            transition: var(--transition);
        }
        
        .benefits-list li:last-child {
            border-bottom: none;
        }
        
        .benefits-list li:hover {
            transform: translateX(10px);
            color: var(--primary);
        }
        
        .benefits-list li i {
            color: var(--success);
            font-size: 1.3rem;
            flex-shrink: 0;
            margin-top: 3px;
            transition: var(--transition);
        }
        
        .benefits-list li:hover i {
            transform: scale(1.3) rotate(10deg);
        }		
		
		
/*--------------footer---------------*/

  :root {
            --primary: #2c3e50;
            --secondary: #3498db;
            --accent: #e74c3c;
            --success: #27ae60;
            --light: #f8f9fa;
            --dark: #2c3e50;
            --gradient-primary: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
            --gradient-accent: linear-gradient(135deg, #e74c3c 0%, #f39c12 100%);
            --gradient-success: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
            --shadow: 0 10px 30px rgba(0,0,0,0.1);
            --shadow-hover: 0 20px 40px rgba(0,0,0,0.15);
            --border-radius: 15px;
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        /* Footer Top Area */
        .footer-top-area {
            background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
            color: white;
            padding: 80px 0 60px;
            position: relative;
            overflow: hidden;
        }

        .footer-top-area::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-accent);
        }

        /* Newsletter Section */
        .newsletter-section {
            background: rgba(255,255,255,0.1);
            border-radius: var(--border-radius);
            padding: 40px;
            margin-bottom: 60px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.2);
        }

        .newsletter-title {
            font-size: 1.8rem;
            font-weight: 700;
            color: white;
            margin-bottom: 15px;
        }

        .newsletter-subtitle {
            color: rgba(255,255,255,0.8);
            margin-bottom: 25px;
        }

        .newsletter-form {
            display: flex;
            gap: 15px;
            max-width: 600px;
            margin: 0 auto;
        }

        .newsletter-input {
            flex: 1;
            padding: 15px 25px;
            border: 2px solid rgba(255,255,255,0.2);
            background: rgba(255,255,255,0.1);
            border-radius: 50px;
            color: white;
            font-size: 1rem;
            transition: var(--transition);
        }

        .newsletter-input:focus {
            outline: none;
            border-color: var(--secondary);
            background: rgba(255,255,255,0.15);
        }

        .newsletter-input::placeholder {
            color: rgba(255,255,255,0.6);
        }

        .newsletter-btn {
            background: var(--gradient-accent);
            color: white;
            border: none;
            padding: 15px 40px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .newsletter-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(231, 76, 60, 0.3);
        }

        /* Footer Columns */
        .footer-column {
            margin-bottom: 40px;
        }

        .widget-title {
            font-size: 1.4rem;
            font-weight: 700;
            color: white;
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 15px;
        }

        .widget-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background: var(--gradient-accent);
            border-radius: 2px;
        }

        /* Contact Info */
        .contact-info {
            color: rgba(255,255,255,0.9);
        }

        .contact-info address p {
            margin-bottom: 15px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            line-height: 1.6;
        }

        .contact-info strong {
            color: white;
            min-width: 70px;
        }

        .contact-info a {
            color: rgba(255,255,255,0.9);
            text-decoration: none;
            transition: var(--transition);
        }

        .contact-info a:hover {
            color: var(--secondary);
            padding-left: 5px;
        }

        /* Social Links */
        .footer-social {
            margin-top: 30px;
        }

        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .social-link {
            width: 45px;
            height: 45px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2rem;
            transition: var(--transition);
            border: 2px solid transparent;
        }

        .social-link:hover {
            transform: translateY(-5px);
            background: var(--gradient-primary);
            border-color: var(--secondary);
        }

        .social-link.facebook:hover { background: #1877F2; }
        .social-link.twitter:hover { background: #1DA1F2; }
        .social-link.linkedin:hover { background: #0077B5; }
        .social-link.instagram:hover { background: linear-gradient(45deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D); }
        .social-link.youtube:hover { background: #FF0000; }

        /* Footer Links */
        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-links li {
            margin-bottom: 12px;
        }

        .footer-links a {
            color: rgba(255,255,255,0.8);
            text-decoration: none;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .footer-links a::before {
            content: '→';
            color: var(--secondary);
            font-weight: bold;
            transition: var(--transition);
        }

        .footer-links a:hover {
            color: white;
            padding-left: 10px;
        }

        .footer-links a:hover::before {
            color: var(--accent);
            transform: translateX(5px);
        }

        /* Footer Bottom */
        .footer-bottom-area {
            background: rgba(0,0,0,0.2);
            padding: 30px 0;
            text-align: center;
            position: relative;
        }

        .footer-bottom-area::before {
            content: '';
            position: absolute;
            top: 0;
            left: 10%;
            right: 10%;
            height: 1px;
            background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
        }

        .copyright-wrap p {
            color: rgba(255,255,255,0.7);
            margin: 0;
            font-size: 1rem;
        }

        .copyright-wrap a {
            color: var(--secondary);
            text-decoration: none;
            transition: var(--transition);
        }

        .copyright-wrap a:hover {
            color: var(--accent);
        }

        /* Floating Contact Buttons */
        .floating-contact {
            position: fixed;
            right: 30px;
            bottom: 30px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .floating-btn {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-hover);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
        }

        .floating-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--gradient-primary);
            transition: var(--transition);
        }

        .floating-btn:hover {
            transform: scale(1.1) rotate(5deg);
        }

        .floating-btn.whatsapp::before {
            background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
        }

        .floating-btn.phone::before {
            background: linear-gradient(135deg, #34e89e 0%, #0f9b0f 100%);
        }

        .floating-btn i {
            color: white;
            font-size: 1.5rem;
            position: relative;
            z-index: 1;
        }

        .floating-tooltip {
            position: absolute;
            right: 70px;
            background: white;
            color: var(--primary);
            padding: 8px 15px;
            border-radius: 5px;
            font-size: 0.9rem;
            font-weight: 600;
            opacity: 0;
            transform: translateX(20px);
            transition: var(--transition);
            white-space: nowrap;
            box-shadow: var(--shadow);
        }

        .floating-btn:hover .floating-tooltip {
            opacity: 1;
            transform: translateX(0);
        }

        .floating-tooltip::after {
            content: '';
            position: absolute;
            right: -6px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-left: 6px solid white;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
        }

        /* Back to Top Button */
        .back-to-top {
            position: fixed;
            left: 30px;
            bottom: 30px;
            width: 50px;
            height: 50px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2rem;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
            box-shadow: var(--shadow);
            z-index: 1000;
        }

        .back-to-top.visible {
            opacity: 1;
            visibility: visible;
        }

        .back-to-top:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
            background: var(--gradient-accent);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .footer-top-area {
                padding: 60px 0 40px;
            }

            .newsletter-form {
                flex-direction: column;
            }

            .newsletter-input,
            .newsletter-btn {
                width: 100%;
                text-align: center;
            }

            .floating-contact {
                right: 20px;
                bottom: 20px;
            }

            .back-to-top {
                left: 20px;
                bottom: 20px;
            }

            .widget-title {
                font-size: 1.2rem;
            }

            .footer-links a {
                font-size: 0.95rem;
            }
        }

        @media (max-width: 480px) {
            .newsletter-section {
                padding: 30px 20px;
            }

            .floating-btn {
                width: 50px;
                height: 50px;
            }

            .floating-btn i {
                font-size: 1.2rem;
            }
        }		
		
		
		/* Membership Cards */
        .membership-cards {
            padding: 100px 0;
            background: var(--light);
        }

        .membership-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 40px 30px;
            text-align: center;
            box-shadow: var(--shadow);
            transition: var(--transition);
            height: 100%;
            position: relative;
            overflow: hidden;
            border: 2px solid transparent;
            background: linear-gradient(white, white) padding-box,
                        var(--gradient-primary) border-box;
        }

        .membership-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: var(--gradient-primary);
            opacity: 0;
            transition: var(--transition);
        }

        .membership-card:hover {
            transform: translateY(-20px);
            box-shadow: var(--shadow-hover);
        }

        .membership-card:hover::before {
            opacity: 1;
            animation: slideIn 0.5s ease;
        }

        @keyframes slideIn {
            from { width: 0; }
            to { width: 100%; }
        }

        .membership-card i {
            font-size: 3.5rem;
            color: var(--secondary);
            margin-bottom: 25px;
            display: inline-block;
            background: linear-gradient(135deg, var(--secondary), var(--primary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            transition: var(--transition);
        }

        .membership-card:hover i {
            transform: scale(1.2) rotate(5deg);
        }

        .membership-card h3 {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 15px;
        }

        .membership-card h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 2px;
            background: var(--accent);
            transition: var(--transition);
        }

        .membership-card:hover h3::after {
            width: 100px;
        }

        .membership-card p {
            color: #666;
            line-height: 1.7;
            font-size: 1.05rem;
            margin-bottom: 25px;
        }

        .price-tag {
            display: inline-block;
            background: var(--gradient-primary);
            color: white;
            padding: 10px 30px;
            border-radius: 50px;
            font-size: 1.5rem;
            font-weight: 700;
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
        }

        /* Benefits Section */
        .benefits-section {
            padding: 100px 0;
            background: white;
        }

        .benefits-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 50px;
        }

        .benefit-card {
            background: var(--light);
            border-radius: var(--border-radius);
            padding: 40px 30px;
            text-align: center;
            transition: var(--transition);
            border: 2px solid transparent;
        }

        .benefit-card:hover {
            transform: translateY(-10px);
            border-color: var(--secondary);
            box-shadow: var(--shadow-hover);
        }

        .benefit-icon {
            width: 80px;
            height: 80px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            color: white;
            font-size: 2rem;
            transition: var(--transition);
        }

        .benefit-card:hover .benefit-icon {
            transform: scale(1.1) rotate(10deg);
        }

        .benefit-card h4 {
            font-size: 1.4rem;
            color: var(--primary);
            margin-bottom: 15px;
        }

        /* Form Section */
        .form-section {
            padding: 100px 0;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            position: relative;
            overflow: hidden;
        }

        .form-section::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 300px;
            height: 300px;
            background: var(--gradient-primary);
            border-radius: 50%;
            transform: translate(150px, -150px);
            opacity: 0.1;
        }

        .form-section::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 400px;
            height: 400px;
            background: var(--gradient-accent);
            border-radius: 50%;
            transform: translate(-200px, 200px);
            opacity: 0.1;
        }

        .form-container {
            background: white;
            border-radius: var(--border-radius);
            padding: 60px;
            box-shadow: var(--shadow);
            position: relative;
            z-index: 2;
        }

        .form-header {
            text-align: center;
            margin-bottom: 50px;
        }

        .form-header h2 {
            font-size: 2.5rem;
            color: var(--primary);
            margin-bottom: 15px;
            font-weight: 700;
        }

        .form-header p {
            color: #666;
            font-size: 1.1rem;
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .form-row {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -15px;
        }

        .form-group {
            flex: 1 0 100%;
            padding: 0 15px;
            margin-bottom: 10px;
        }


        .form-label {
            display: block;
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 10px;
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .form-label .required {
            color: var(--accent);
        }

        .form-control {
            width: 100%;
            font-size: 1rem;
            transition: var(--transition);
            background: white;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--secondary);
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
        }


        .submit-btn {
            background: var(--gradient-primary);
            color: white;
            border: none;
            padding: 18px 50px;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-shadow: 0 10px 20px rgba(52, 152, 219, 0.3);
        }

        .submit-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(52, 152, 219, 0.4);
        }

        .submit-btn:active {
            transform: translateY(-2px);
        }

        .submit-btn i {
            font-size: 1.2rem;
            transition: var(--transition);
        }

        .submit-btn:hover i {
            transform: translateX(5px);
        }

        /* Alert Messages */
        .alert {
            padding: 20px 30px;
            border-radius: 15px;
            margin-bottom: 30px;
            border: none;
            position: relative;
            overflow: hidden;
        }

        .alert-success {
            background: var(--gradient-success);
            color: white;
            box-shadow: 0 10px 20px rgba(39, 174, 96, 0.2);
        }

        .alert-danger {
            background: var(--gradient-accent);
            color: white;
            box-shadow: 0 10px 20px rgba(231, 76, 60, 0.2);
        }

        .alert i {
            margin-right: 10px;
            font-size: 1.2rem;
        }

        /* Floating Elements */
        .floating-elements {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .floating-element {
            position: absolute;
            width: 100px;
            height: 100px;
            background: var(--gradient-primary);
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            opacity: 0.1;
            animation: float 20s infinite ease-in-out;
        }

        .floating-element:nth-child(1) {
            top: 10%;
            left: 5%;
            animation-delay: 0s;
        }

        .floating-element:nth-child(2) {
            top: 60%;
            right: 10%;
            animation-delay: 5s;
            background: var(--gradient-accent);
        }

        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        }

        /* Stats Section */
        .stats-section {
            padding: 80px 0;
            background: var(--gradient-primary);
            color: white;
        }

        .stat-item {
            text-align: center;
            padding: 30px;
        }

        .stat-number {
            font-size: 3rem;
            font-weight: 800;
            margin-bottom: 10px;
            display: block;
        }

        .stat-label {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }
            
            .membership-cards,
            .benefits-section,
            .form-section {
                padding: 60px 0;
            }
            
            .form-container {
                padding: 30px 20px;
            }
            
            .form-header h2 {
                font-size: 2rem;
            }
            
            .membership-card {
                padding: 30px 20px;
            }
            
            .membership-card h3 {
                font-size: 1.5rem;
            }
            
            .price-tag {
                font-size: 1.2rem;
                padding: 8px 20px;
            }
        }

        /* Animation Classes */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }

        .animate-on-scroll.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 10px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--secondary);
            border-radius: 5px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary);
        }
		
/*--------workshop---------*/

 :root {
            --primary: #2c3e50;
            --secondary: #3498db;
            --accent: #e74c3c;
            --success: #27ae60;
            --light: #f8f9fa;
            --dark: #2c3e50;
            --gradient-primary: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
            --gradient-accent: linear-gradient(135deg, #e74c3c 0%, #f39c12 100%);
            --gradient-success: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
            --shadow: 0 10px 30px rgba(0,0,0,0.1);
            --shadow-hover: 0 20px 40px rgba(0,0,0,0.15);
            --border-radius: 20px;
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }


        /* Section Styling */
        .content-section {
            padding: 80px 0;
        }

        .section-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-title {
            font-size: 2.8rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--accent);
            border-radius: 2px;
        }

        .section-subtitle {
            font-size: 1.1rem;
            color: #666;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.8;
        }

        /* Technology Cards */
        .tech-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 50px;
        }

        .tech-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 30px 20px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            border: 2px solid transparent;
            background: linear-gradient(white, white) padding-box,
                        var(--gradient-primary) border-box;
            position: relative;
            overflow: hidden;
        }

        .tech-card:hover {
            transform: translateY(-15px);
            box-shadow: var(--shadow-hover);
        }

        .tech-icon {
            width: 70px;
            height: 70px;
            background: var(--gradient-primary);
            border-radius: 20px;
           /* display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2rem;
            margin-bottom: 25px;*/
            transition: var(--transition);
        }

        .tech-card:hover .tech-icon {
            transform: scale(1.1) rotate(10deg);
        }

        .tech-card h3 {
            font-size: 1.5rem;
            color: var(--primary);
            margin-bottom: 15px;
            font-weight: 700;
        }

        .tech-card p {
            color: #666;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        .tech-features {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .tech-features li {
            padding: 8px 0;
            color: #555;
            position: relative;
            padding-left: 25px;
        }

        .tech-features li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--success);
            font-weight: bold;
        }

        /* Application Cards */
        .app-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 20px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .app-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: var(--gradient-primary);
            transition: var(--transition);
        }

        .app-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
        }

        .app-card:hover::before {
            background: var(--gradient-accent);
        }

        .app-icon {
            width: 60px;
            height: 60px;
            background: var(--light);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--secondary);
            font-size: 1.8rem;
            margin-bottom: 20px;
            transition: var(--transition);
        }

        .app-card:hover .app-icon {
            background: var(--gradient-primary);
            color: white;
        }

        .app-card h4 {
            font-size: 1rem;
            color: var(--primary);
            margin-bottom: 15px;
            font-weight: 700;
        }

        /* Alternate Background Sections */
        .alt-bg {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        }

    


        /* Pricing Table */
        .pricing-table {
            background: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            margin-top: 50px;
        }

        .table-header {
            background: var(--gradient-primary);
            color: white;
            padding: 25px;
            text-align: center;
        }

        .table-header h3 {
            margin: 0;
            font-size: 1.8rem;
            font-weight: 700;
			color:#fff;
        }

        .table-body {
            padding: 0;
        }

        .table {
            margin: 0;
            border-collapse: collapse;
        }

        .table th {
            background: var(--light);
            padding: 20px;
            font-weight: 700;
            color: var(--primary);
            border-bottom: 2px solid #dee2e6;
            text-align: center;
        }

        .table td {
            padding: 20px;
            border-bottom: 1px solid #dee2e6;
            text-align: center;
            vertical-align: middle;
        }

        .table tr:last-child td {
            border-bottom: none;
        }

        .price-badge {
            display: block ruby;
            background: var(--gradient-success);
            color: white;
            padding: 5px 20px;
            border-radius: 50px;
            font-weight: 500;
            font-size: .8rem;
        }

        /* Notes Section */
        .notes-section {
            background: linear-gradient(135deg, #fff8e1 0%, #ffeaa7 100%);
            border-radius: var(--border-radius);
            padding: 40px;
            margin-top: 50px;
            border-left: 5px solid var(--accent);
        }

        .notes-title {
            font-size: 1.5rem;
            color: var(--primary);
            margin-bottom: 20px;
            font-weight: 700;
        }

        .notes-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .notes-list li {
            padding: 12px 0;
            color: #555;
            position: relative;
            padding-left: 35px;
            font-size: 1.05rem;
            line-height: 1.6;
        }

        .notes-list li::before {
            content: '•';
            position: absolute;
            left: 15px;
            color: var(--accent);
            font-size: 1.5rem;
            line-height: 1;
        }

        /* Floating Elements */
        .floating-elements {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .floating-element {
            position: absolute;
            width: 100px;
            height: 100px;
            background: var(--gradient-primary);
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            opacity: 0.1;
            animation: float 20s infinite ease-in-out;
        }

        .floating-element:nth-child(1) {
            top: 10%;
            left: 5%;
            animation-delay: 0s;
        }

        .floating-element:nth-child(2) {
            top: 60%;
            right: 10%;
            animation-delay: 5s;
            background: var(--gradient-accent);
        }

        /* Animations */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }

        .animate-on-scroll.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }
            
            .section-title {
                font-size: 2.2rem;
            }
            
            .content-section {
                padding: 60px 0;
            }
            
            .tech-grid {
                grid-template-columns: 1fr;
            }
            
            .table-responsive {
                overflow-x: auto;
            }
            
            .notes-section {
                padding: 30px 20px;
            }
        }

     :root {
            --primary: #2c3e50;
            --secondary: #3498db;
            --accent: #e74c3c;
            --success: #27ae60;
            --light: #f8f9fa;
            --dark: #2c3e50;
            --gradient-primary: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
            --gradient-accent: linear-gradient(135deg, #e74c3c 0%, #f39c12 100%);
            --gradient-success: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
            --gradient-purple: linear-gradient(135deg, #8e44ad 0%, #3498db 100%);
            --shadow: 0 10px 30px rgba(0,0,0,0.1);
            --shadow-hover: 0 20px 40px rgba(0,0,0,0.15);
            --border-radius: 20px;
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

       

        /* Section Styling */
        .content-section {
            padding: 80px 0;
        }

        .section-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-title {
            font-size: 2.8rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--accent);
            border-radius: 2px;
        }

        .section-subtitle {
            font-size: 1rem;
            color: #666;
            max-width: 740px;
            margin: 0 auto;
            line-height: 1.8;
        }

        /* Components Grid */
        .components-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 50px;
        }

        .component-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 35px 25px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            border: 2px solid transparent;
            background: linear-gradient(white, white) padding-box,
                        var(--gradient-purple) border-box;
            position: relative;
            overflow: hidden;
            text-align: center;
        }

        .component-card:hover {
            transform: translateY(-15px);
            box-shadow: var(--shadow-hover);
        }

        .component-number {
            position: absolute;
            top: 15px;
            left: 15px;
            width: 40px;
            height: 40px;
            background: var(--gradient-purple);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.2rem;
        }

        .component-icon {
            width: 80px;
            height: 80px;
            background: var(--gradient-purple);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2rem;
            margin: 0 auto 25px;
            transition: var(--transition);
        }

        .component-card:hover .component-icon {
            transform: scale(1.1) rotate(10deg);
        }

        .component-card h4 {
            font-size: 1.4rem;
            color: var(--primary);
            margin-bottom: 15px;
            font-weight: 700;
        }

        .component-card p {
            color: #666;
            line-height: 1.7;
            margin: 0;
        }

        /* Steps Timeline */
        .timeline-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 80px 0;
        }

        .timeline {
            position: relative;
            max-width: 1000px;
            margin: 50px auto 0;
        }

        .timeline::before {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 100%;
            background: var(--gradient-purple);
            border-radius: 2px;
        }

        .timeline-item {
            position: relative;
            margin-bottom: 50px;
            width: 45%;
        }

        .timeline-item:nth-child(odd) {
            left: 0;
        }

        .timeline-item:nth-child(even) {
            left: 55%;
        }

        .timeline-content {
            background: white;
            border-radius: var(--border-radius);
            padding: 30px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            position: relative;
            border: 2px solid transparent;
            background: linear-gradient(white, white) padding-box,
                        var(--gradient-primary) border-box;
        }

        .timeline-content:hover {
            transform: translateX(10px);
            box-shadow: var(--shadow-hover);
        }

        .timeline-step {
            position: absolute;
            width: 60px;
            height: 60px;
            background: var(--gradient-purple);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.5rem;
            top: 30px;
            z-index: 2;
        }

        .timeline-item:nth-child(odd) .timeline-step {
            right: -80px;
        }

        .timeline-item:nth-child(even) .timeline-step {
            left: -80px;
        }

        .timeline-content h4 {
            font-size: 1.4rem;
            color: var(--primary);
            margin-bottom: 15px;
            font-weight: 700;
        }

        .timeline-content p {
            color: #666;
            line-height: 1.7;
            margin: 0;
        }

        /* Pricing Table */
        .pricing-table {
            background: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            margin-top: 50px;
        }

        .table-header {
            background: var(--gradient-purple);
            color: white;
            padding: 25px;
            text-align: center;
        }

        .table-header h3 {
            margin: 0;
            font-size: 1.8rem;
            font-weight: 700;
        }

        .table-body {
            padding: 0;
        }

        .table {
            margin: 0;
            border-collapse: collapse;
        }

        .table th {
            background: var(--light);
            padding: 20px;
            font-weight: 700;
            color: var(--primary);
            border-bottom: 2px solid #dee2e6;
            text-align: center;
        }

        .table td {
            padding: 20px;
            border-bottom: 1px solid #dee2e6;
            text-align: center;
            vertical-align: middle;
        }

        .table tr:last-child td {
            border-bottom: none;
        }

      

        /* Feature Cards */
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

        .feature-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 40px 30px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            text-align: center;
            border: 2px solid transparent;
            background: linear-gradient(white, white) padding-box,
                        var(--gradient-primary) border-box;
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
        }

        .feature-icon {
            width: 70px;
            height: 70px;
            background: var(--gradient-primary);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2rem;
            margin: 0 auto 25px;
            transition: var(--transition);
        }

        .feature-card:hover .feature-icon {
            transform: scale(1.1) rotate(10deg);
            background: var(--gradient-purple);
        }

        .feature-card h4 {
            font-size: 1.4rem;
            color: var(--primary);
            margin-bottom: 15px;
            font-weight: 700;
        }

        .feature-card p {
            color: #666;
            line-height: 1.7;
            margin: 0;
        }

        /* Notes Section */
        .notes-section {
            background: linear-gradient(135deg, #fff8e1 0%, #ffeaa7 100%);
            border-radius: var(--border-radius);
            padding: 40px;
            margin-top: 50px;
            border-left: 5px solid var(--accent);
        }

        .notes-title {
            font-size: 1.5rem;
            color: var(--primary);
            margin-bottom: 20px;
            font-weight: 700;
        }

        .notes-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .notes-list li {
            padding: 12px 0;
            color: #555;
            position: relative;
            padding-left: 35px;
            font-size: 1.05rem;
            line-height: 1.6;
        }

        .notes-list li::before {
            content: '✓';
            position: absolute;
            left: 15px;
            color: var(--success);
            font-weight: bold;
            font-size: 1.2rem;
        }

        /* Floating Elements */
        .floating-elements {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .floating-element {
            position: absolute;
            width: 100px;
            height: 100px;
            background: var(--gradient-purple);
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            opacity: 0.1;
            animation: float 20s infinite ease-in-out;
        }

        .floating-element:nth-child(1) {
            top: 10%;
            left: 5%;
            animation-delay: 0s;
        }

        .floating-element:nth-child(2) {
            top: 60%;
            right: 10%;
            animation-delay: 5s;
            background: var(--gradient-accent);
        }

        /* Image Enhancement */
        .featured-image {
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .featured-image:hover {
            transform: scale(1.02);
            box-shadow: var(--shadow-hover);
        }

        .featured-image img {
            width: auto;          
            display: block;
			min-height: 150px;
        }

        /* Animations */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }

        .animate-on-scroll.visible {
            opacity: 1;
            transform: translateY(0);
        }

        

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }
            
            .section-title {
                font-size: 2.2rem;
            }
            
            .content-section {
                padding: 60px 0;
            }
            
            .timeline::before {
                left: 30px;
            }
            
            .timeline-item {
                width: 100%;
                left: 0 !important;
                padding-left: 70px;
            }
            
            .timeline-step {
                left: 0 !important;
                right: auto !important;
            }
            
            .components-grid,
            .feature-grid {
                grid-template-columns: 1fr;
            }
            
            .table-responsive {
                overflow-x: auto;
            }
            
            .notes-section {
                padding: 30px 20px;
            }
        }
		:root {
            --primary: #2c3e50;
            --secondary: #3498db;
            --accent: #e74c3c;
            --success: #27ae60;
            --light: #f8f9fa;
            --dark: #2c3e50;
            --gradient-primary: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
            --gradient-accent: linear-gradient(135deg, #e74c3c 0%, #f39c12 100%);
            --gradient-success: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
            --gradient-arduino: linear-gradient(135deg, #00979D 0%, #3498db 100%);
            --shadow: 0 10px 30px rgba(0,0,0,0.1);
            --shadow-hover: 0 20px 40px rgba(0,0,0,0.15);
            --border-radius: 20px;
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }


        /* Section Styling */
        .content-section {
            padding: 80px 0;
        }

        .section-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-title {
            font-size: 2.8rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--accent);
            border-radius: 2px;
        }

        .section-subtitle {
            font-size: 1.1rem;
            color: #666;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.8;
        }

        /* Feature Cards */
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

        .feature-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 40px 30px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            border: 2px solid transparent;
            background: linear-gradient(white, white) padding-box,
                        var(--gradient-arduino) border-box;
            position: relative;
            overflow: hidden;
            text-align: center;
        }

        .feature-card:hover {
            transform: translateY(-15px);
            box-shadow: var(--shadow-hover);
        }

        .feature-icon {
            width: 80px;
            height: 80px;
            background: var(--gradient-arduino);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2.5rem;
            margin: 0 auto 25px;
            transition: var(--transition);
        }

        .feature-card:hover .feature-icon {
            transform: scale(1.1) rotate(10deg);
        }

        .feature-card h3 {
            font-size: 1.5rem;
            color: var(--primary);
            margin-bottom: 15px;
            font-weight: 700;
        }

        .feature-card p {
            color: #666;
            line-height: 1.7;
            margin: 0;
        }

        /* Components Section */
        .components-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        }

        .component-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .component-item {
            background: white;
            border-radius: var(--border-radius);
            padding: 25px 30px;
            margin-bottom: 20px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 20px;
            border-left: 4px solid var(--success);
        }

        .component-item:hover {
            transform: translateX(10px);
            box-shadow: var(--shadow-hover);
        }

        .component-icon {
            width: 50px;
            height: 50px;
            background: var(--gradient-arduino);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            flex-shrink: 0;
        }

        .component-content h4 {
            font-size: 1.3rem;
            color: var(--primary);
            margin-bottom: 8px;
            font-weight: 700;
        }

        .component-content p {
            color: #666;
            line-height: 1.6;
            margin: 0;
        }

        /* Project Section */
        .project-section {
            background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
            color: white;
        }

        .project-card {
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            border-radius: var(--border-radius);
            padding: 40px;
            border: 1px solid rgba(255,255,255,0.2);
            transition: var(--transition);
            height: 100%;
        }

        .project-card:hover {
            transform: translateY(-10px);
            background: rgba(255,255,255,0.15);
            border-color: var(--accent);
        }

        .project-icon {
            width: 70px;
            height: 70px;
            background: var(--gradient-arduino);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2rem;
            margin-bottom: 25px;
        }

        .project-card h4 {
            font-size: 1.4rem;
            margin-bottom: 15px;
            font-weight: 700;
			color: #ccc;
        }

        .project-card ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .project-card li {
            padding: 8px 0;
            position: relative;
            padding-left: 25px;
        }

        .project-card li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--success);
            font-weight: bold;
        }

        /* Code Example */
        .code-example {
            background: #1e1e1e;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            margin-top: 30px;
        }

        .code-header {
            background: #252526;
            padding: 15px 25px;
            color: #ccc;
            font-family: monospace;
            font-size: 0.9rem;
            border-bottom: 1px solid #333;
        }

        .code-body {
            padding: 25px;
            color: #d4d4d4;
            font-family: 'Courier New', monospace;
            font-size: 0.95rem;
            line-height: 1.6;
            overflow-x: auto;
        }

        .code-keyword {
            color: #569cd6;
        }

        .code-function {
            color: #dcdcaa;
        }

        .code-comment {
            color: #6a9955;
        }

        .code-number {
            color: #b5cea8;
        }

        /* Pricing Table */
        .pricing-table {
            background: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            margin-top: 50px;
        }

        .table-header {
            background: var(--gradient-arduino);
            color: white;
            padding: 25px;
            text-align: center;
        }

        .table-header h3 {
            margin: 0;
            font-size: 1.8rem;
            font-weight: 700;
        }

        .table-body {
            padding: 0;
        }

        .table {
            margin: 0;
            border-collapse: collapse;
        }

        .table th {
            background: var(--light);
            padding: 20px;
            font-weight: 700;
            color: var(--primary);
            border-bottom: 2px solid #dee2e6;
            text-align: center;
        }

        .table td {
            padding: 20px;
            border-bottom: 1px solid #dee2e6;
            text-align: center;
            vertical-align: middle;
        }

        .table tr:last-child td {
            border-bottom: none;
        }



        /* Notes Section */
        .notes-section {
            background: linear-gradient(135deg, #fff8e1 0%, #ffeaa7 100%);
            border-radius: var(--border-radius);
            padding: 40px;
            margin-top: 50px;
            border-left: 5px solid var(--accent);
        }

        .notes-title {
            font-size: 1.5rem;
            color: var(--primary);
            margin-bottom: 20px;
            font-weight: 700;
        }

        .notes-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .notes-list li {
            padding: 12px 0;
            color: #555;
            position: relative;
            padding-left: 35px;
            font-size: 1.05rem;
            line-height: 1.6;
        }

        .notes-list li::before {
            content: '✓';
            position: absolute;
            left: 15px;
            color: var(--success);
            font-weight: bold;
            font-size: 1.2rem;
        }


        /* Floating Elements */
        .floating-elements {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .floating-element {
            position: absolute;
            width: 100px;
            height: 100px;
            background: var(--gradient-arduino);
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            opacity: 0.1;
            animation: float 20s infinite ease-in-out;
        }

        .floating-element:nth-child(1) {
            top: 10%;
            left: 5%;
            animation-delay: 0s;
        }

        .floating-element:nth-child(2) {
            top: 60%;
            right: 10%;
            animation-delay: 5s;
            background: var(--gradient-accent);
        }

        /* Animations */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }

        .animate-on-scroll.visible {
            opacity: 1;
            transform: translateY(0);
        }


        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }
            
            .section-title {
                font-size: 2.2rem;
            }
            
            .content-section {
                padding: 60px 0;
            }
            
            .feature-grid {
                grid-template-columns: 1fr;
            }
            
            .component-item {
                flex-direction: column;
                text-align: center;
                gap: 15px;
            }
            
            .table-responsive {
                overflow-x: auto;
            }
            
            .notes-section {
                padding: 30px 20px;
            }
        }
		
:root {
            --primary: #2c3e50;
            --secondary: #3498db;
            --accent: #e74c3c;
            --success: #27ae60;
            --light: #f8f9fa;
            --dark: #2c3e50;
            --gradient-primary: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
            --gradient-accent: linear-gradient(135deg, #e74c3c 0%, #f39c12 100%);
            --gradient-success: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
            --gradient-iot: linear-gradient(135deg, #00BCD4 0%, #3498db 100%);
            --shadow: 0 10px 30px rgba(0,0,0,0.1);
            --shadow-hover: 0 20px 40px rgba(0,0,0,0.15);
            --border-radius: 20px;
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        /* Hero Section */
        .hero-section {
            background: linear-gradient(135deg, #00BCD4 0%, #2c3e50 100%);
            padding: 120px 0 80px;
            position: relative;
            overflow: hidden;
            color: white;
        }

        /* Section Styling */
        .content-section {
            padding: 80px 0;
        }

       

        /* IoT Components Grid */
        .iot-components {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 50px;
        }

        .component-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 35px 25px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            border: 2px solid transparent;
            background: linear-gradient(white, white) padding-box,
                        var(--gradient-iot) border-box;
            position: relative;
            overflow: hidden;
            text-align: center;
        }

        .component-card:hover {
            transform: translateY(-15px);
            box-shadow: var(--shadow-hover);
        }

        .component-icon {
            width: 80px;
            height: 80px;
            background: var(--gradient-iot);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2.5rem;
            margin: 0 auto 25px;
            transition: var(--transition);
        }

        .component-card:hover .component-icon {
            transform: scale(1.1) rotate(10deg);
        }

        .component-card h3 {
            font-size: 1.5rem;
            color: var(--primary);
            margin-bottom: 15px;
            font-weight: 700;
        }

        .component-card p {
            color: #666;
            line-height: 1.7;
            margin: 0;
        }

        /* Application Cards */
        .applications-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        }

        .app-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 50px;
        }

        .app-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 30px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            height: 100%;
            border: 2px solid transparent;
        }

        .app-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
            border-color: var(--gradient-iot);
        }

        .app-icon {
            width: 60px;
            height: 60px;
            background: var(--gradient-iot);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.8rem;
            margin-bottom: 20px;
        }

        .app-card h4 {
            font-size: 1.3rem;
            color: var(--primary);
            margin-bottom: 15px;
            font-weight: 700;
        }

        .app-card p {
            color: #666;
            line-height: 1.7;
            margin: 0;
        }

        /* Challenges Section */
        .challenges-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
            margin-top: 50px;
        }

        .challenge-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 30px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            text-align: center;
            border-top: 4px solid;
        }

        .challenge-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }

        .challenge-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            margin: 0 auto 20px;
            color: white;
        }

        .challenge-card.security {
            border-color: #e74c3c;
        }

        .challenge-card.security .challenge-icon {
            background: #e74c3c;
        }

        .challenge-card.interop {
            border-color: #3498db;
        }

        .challenge-card.interop .challenge-icon {
            background: #3498db;
        }

        .challenge-card.scalability {
            border-color: #f39c12;
        }

        .challenge-card.scalability .challenge-icon {
            background: #f39c12;
        }

        .challenge-card.privacy {
            border-color: #9b59b6;
        }

        .challenge-card.privacy .challenge-icon {
            background: #9b59b6;
        }

        .challenge-card h4 {
            font-size: 1.2rem;
            color: var(--primary);
            margin-bottom: 10px;
            font-weight: 700;
        }

        .challenge-card p {
            color: #666;
            line-height: 1.6;
            font-size: 0.95rem;
            margin: 0;
        }

        /* Future Trends */
        .trends-section {
            background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
            color: white;
        }

        .trends-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 50px;
        }

        .trend-card {
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            border-radius: var(--border-radius);
            padding: 30px;
            border: 1px solid rgba(255,255,255,0.2);
            transition: var(--transition);
            text-align: center;
        }

        .trend-card:hover {
            transform: translateY(-10px);
            background: rgba(255,255,255,0.15);
            border-color: var(--accent);
        }

        .trend-icon {
            width: 70px;
            height: 70px;
            background: var(--gradient-iot);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2rem;
            margin: 0 auto 25px;
        }

        .trend-card h4 {
            font-size: 1.3rem;
            margin-bottom: 15px;
            font-weight: 700;
			color:#ccc;
        }

        .trend-card p {
            color: rgba(255,255,255,0.8);
            line-height: 1.7;
            margin: 0;
        }

        /* Technology Stack */
        .tech-stack {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            margin-top: 40px;
        }

        .tech-item {
            background: white;
            border-radius: 50px;
            padding: 7px 15px;
            box-shadow: var(--shadow);
            display: flex;
            align-items: center;
            gap: 10px;
            transition: var(--transition);
            border: 2px solid transparent;
        }

        .tech-item:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
            border-color: var(--gradient-iot);
        }

        .tech-icon {
            color: var(--secondary);
            font-size: 1.2rem;
			padding-top: 15px;
        }

        /* Pricing Table */
        .pricing-table {
            background: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            margin-top: 50px;
        }

        .table-header {
            background: var(--gradient-iot);
            color: white;
            padding: 25px;
            text-align: center;
        }

        .table-header h3 {
            margin: 0;
            font-size: 1.8rem;
            font-weight: 700;
        }

        .table-body {
            padding: 0;
        }

        .table {
            margin: 0;
            border-collapse: collapse;
        }

        .table th {
            background: var(--light);
            padding: 20px;
            font-weight: 700;
            color: var(--primary);
            border-bottom: 2px solid #dee2e6;
            text-align: center;
        }

        .table td {
            padding: 20px;
            border-bottom: 1px solid #dee2e6;
            text-align: center;
            vertical-align: middle;
        }

        .table tr:last-child td {
            border-bottom: none;
        }

        .price-badge {
            display: inline-block;
            background: var(--gradient-iot);
            color: white;
            padding: 8px 20px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1.1rem;
        }

        /* Notes Section */
        .notes-section {
            background: linear-gradient(135deg, #fff8e1 0%, #ffeaa7 100%);
            border-radius: var(--border-radius);
            padding: 40px;
            margin-top: 50px;
            border-left: 5px solid var(--accent);
        }

        .notes-title {
            font-size: 1.5rem;
            color: var(--primary);
            margin-bottom: 20px;
            font-weight: 700;
        }

        .notes-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .notes-list li {
            padding: 12px 0;
            color: #555;
            position: relative;
            padding-left: 35px;
            font-size: 1.05rem;
            line-height: 1.6;
        }

        .notes-list li::before {
            content: '✓';
            position: absolute;
            left: 15px;
            color: var(--success);
            font-weight: bold;
            font-size: 1.2rem;
        }

        /* Image Enhancement */
        .featured-image {
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .featured-image:hover {
            transform: scale(1.02);
            box-shadow: var(--shadow-hover);
        }

        .featured-image img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* Floating Elements */
        .floating-elements {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .floating-element {
            position: absolute;
            width: 100px;
            height: 100px;
            background: var(--gradient-iot);
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            opacity: 0.1;
            animation: float 20s infinite ease-in-out;
        }

        .floating-element:nth-child(1) {
            top: 10%;
            left: 5%;
            animation-delay: 0s;
        }

        .floating-element:nth-child(2) {
            top: 60%;
            right: 10%;
            animation-delay: 5s;
            background: var(--gradient-accent);
        }

        /* Animations */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }

        .animate-on-scroll.visible {
            opacity: 1;
            transform: translateY(0);
        }

       

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }
            
            .section-title {
                font-size: 2.2rem;
            }
            
            .content-section {
                padding: 60px 0;
            }
            
            .iot-components,
            .app-grid,
            .challenges-grid,
            .trends-grid {
                grid-template-columns: 1fr;
            }
            
            .tech-stack {
                flex-direction: column;
                align-items: center;
            }
            
            .table-responsive {
                overflow-x: auto;
            }
            
            .notes-section {
                padding: 30px 20px;
            }
        }		:root {
            --primary: #2c3e50;
            --secondary: #3498db;
            --accent: #e74c3c;
            --success: #27ae60;
            --light: #f8f9fa;
            --dark: #2c3e50;
            --gradient-primary: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
            --gradient-accent: linear-gradient(135deg, #e74c3c 0%, #f39c12 100%);
            --gradient-success: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
            --gradient-drone: linear-gradient(135deg, #1a237e 0%, #3498db 100%);
            --shadow: 0 10px 30px rgba(0,0,0,0.1);
            --shadow-hover: 0 20px 40px rgba(0,0,0,0.15);
            --border-radius: 20px;
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

      
        /* Section Styling */
        .content-section {
            padding: 80px 0;
        }

        

        /* Introduction Section */
        .intro-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        }

        .intro-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 40px;
            box-shadow: var(--shadow);
            margin-bottom: 30px;
            border: 2px solid transparent;
            background: linear-gradient(white, white) padding-box,
                        var(--gradient-drone) border-box;
        }

        /* Components Grid */
        .components-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

        .component-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 35px 25px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            text-align: center;
            border: 2px solid transparent;
            background: linear-gradient(white, white) padding-box,
                        var(--gradient-drone) border-box;
            position: relative;
            overflow: hidden;
        }

        .component-card:hover {
            transform: translateY(-15px);
            box-shadow: var(--shadow-hover);
        }

        .component-icon {
            width: 80px;
            height: 80px;
            background: var(--gradient-drone);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2.5rem;
            margin: 0 auto 25px;
            transition: var(--transition);
        }

        .component-card:hover .component-icon {
            transform: scale(1.1) rotate(10deg);
        }

        .component-card h4 {
            font-size: 1.4rem;
            color: var(--primary);
            margin-bottom: 15px;
            font-weight: 700;
        }

        .component-card p {
            color: #666;
            line-height: 1.7;
            margin: 0;
        }

        /* Types Grid */
        .types-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 50px;
        }

        .type-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 30px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            text-align: center;
            border-top: 4px solid var(--gradient-drone);
        }

        .type-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
        }

        .type-icon {
            width: 70px;
            height: 70px;
            background: var(--gradient-drone);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2rem;
            margin: 0 auto 25px;
        }

        .type-card h4 {
            font-size: 1.3rem;
            color: var(--primary);
            margin-bottom: 15px;
            font-weight: 700;
        }

        .type-card p {
            color: #666;
            line-height: 1.6;
            margin: 0;
        }

        /* Flight Modes */
        .modes-section {
            background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
            color: white;
        }

        .mode-card {
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            border-radius: var(--border-radius);
            padding: 30px;
            border: 1px solid rgba(255,255,255,0.2);
            transition: var(--transition);
            text-align: center;
            height: 100%;
        }

        .mode-card:hover {
            transform: translateY(-10px);
            background: rgba(255,255,255,0.15);
            border-color: var(--accent);
        }

        .mode-icon {
            width: 60px;
            height: 60px;
            background: var(--gradient-drone);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.8rem;
            margin: 0 auto 20px;
        }

        .mode-card h4 {
            font-size: 1.3rem;
            margin-bottom: 15px;
            font-weight: 700;
        }

        .mode-card p {
            color: rgba(255,255,255,0.8);
            line-height: 1.6;
            margin: 0;
        }

        /* Safety Section */
        .safety-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
            margin-top: 50px;
        }

        .safety-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 30px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            text-align: center;
            border-left: 4px solid var(--success);
        }

        .safety-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }

        .safety-icon {
            width: 60px;
            height: 60px;
            background: var(--gradient-success);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.8rem;
            margin: 0 auto 20px;
        }

        .safety-card h4 {
            font-size: 1.2rem;
            color: var(--primary);
            margin-bottom: 10px;
            font-weight: 700;
        }

        .safety-card p {
            color: #666;
            line-height: 1.6;
            font-size: 0.95rem;
            margin: 0;
        }

        /* Future Trends */
        .trends-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 50px;
        }

        .trend-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 30px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            text-align: center;
            border-right: 4px solid var(--gradient-drone);
        }

        .trend-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
        }

        .trend-icon {
            width: 60px;
            height: 60px;
            background: var(--gradient-drone);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.8rem;
            margin: 0 auto 20px;
        }

        .trend-card h4 {
            font-size: 1.3rem;
            color: var(--primary);
            margin-bottom: 15px;
            font-weight: 700;
        }

        .trend-card p {
            color: #666;
            line-height: 1.6;
            margin: 0;
        }

        /* Image Gallery */
        .image-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 50px;
        }

     

        .gallery-item:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

        .gallery-item:hover img {
            transform: scale(1.1);
        }

        /* Pricing Table */
        .pricing-table {
            background: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            margin-top: 50px;
        }

        .table-header {
            background: var(--gradient-drone);
            color: white;
            padding: 25px;
            text-align: center;
        }

        .table-header h3 {
            margin: 0;
            font-size: 1.8rem;
            font-weight: 700;
        }

        .table-body {
            padding: 0;
        }

        .table {
            margin: 0;
            border-collapse: collapse;
        }

        .table th {
            background: var(--light);
            padding: 20px;
            font-weight: 700;
            color: var(--primary);
            border-bottom: 2px solid #dee2e6;
            text-align: center;
        }

        .table td {
            padding: 20px;
            border-bottom: 1px solid #dee2e6;
            text-align: center;
            vertical-align: middle;
        }

        .table tr:last-child td {
            border-bottom: none;
        }

        .price-badge {
            display: inline-block;
            background: var(--gradient-drone);
            color: white;
            padding: 8px 20px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1.1rem;
        }

        /* Notes Section */
        .notes-section {
            background: linear-gradient(135deg, #fff8e1 0%, #ffeaa7 100%);
            border-radius: var(--border-radius);
            padding: 40px;
            margin-top: 50px;
            border-left: 5px solid var(--accent);
        }

        .notes-title {
            font-size: 1.5rem;
            color: var(--primary);
            margin-bottom: 20px;
            font-weight: 700;
        }

        .notes-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .notes-list li {
            padding: 12px 0;
            color: #555;
            position: relative;
            padding-left: 35px;
            font-size: 1.05rem;
            line-height: 1.6;
        }

        .notes-list li::before {
            content: '✓';
            position: absolute;
            left: 15px;
            color: var(--success);
            font-weight: bold;
            font-size: 1.2rem;
        }

        /* Image Enhancement */
        .featured-image {
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .featured-image:hover {
            transform: scale(1.02);
            box-shadow: var(--shadow-hover);
        }

        .featured-image img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* Floating Elements */
        .floating-elements {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .floating-element {
            position: absolute;
            width: 100px;
            height: 100px;
            background: var(--gradient-drone);
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            opacity: 0.1;
            animation: float 20s infinite ease-in-out;
        }

        .floating-element:nth-child(1) {
            top: 10%;
            left: 5%;
            animation-delay: 0s;
        }

        .floating-element:nth-child(2) {
            top: 60%;
            right: 10%;
            animation-delay: 5s;
            background: var(--gradient-accent);
        }

        /* Animations */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }

        .animate-on-scroll.visible {
            opacity: 1;
            transform: translateY(0);
        }


        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }
            
            .section-title {
                font-size: 2.2rem;
            }
            
            .content-section {
                padding: 60px 0;
            }
            
            .components-grid,
            .types-grid,
            .safety-grid,
            .trends-grid {
                grid-template-columns: 1fr;
            }
            
            .image-gallery {
                grid-template-columns: 1fr;
            }
            
            .table-responsive {
                overflow-x: auto;
            }
            
            .notes-section {
                padding: 30px 20px;
            }
        }
		

       

        /* Gallery Filter */
        .gallery-filter {
            padding: 40px 0;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        }

        .filter-container {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        .filter-title {
            font-size: 1.8rem;
            color: var(--primary);
            margin-bottom: 25px;
            font-weight: 700;
        }

        .filter-buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            margin-bottom: 30px;
        }

        .filter-btn {
            background: white;
            border: 2px solid transparent;
            padding: 8px 20px;
            border-radius: 50px;
            font-weight: 600;
          
            cursor: pointer;
            transition: var(--transition);
            box-shadow: var(--shadow);
        }

        .filter-btn:hover,
        .filter-btn.active {
            background: #094995;
            color:#fff;
            transform: translateY(-3px);
            box-shadow: var(--shadow-hover);
        }

        /* Masonry Gallery */
        .gallery-section {
            padding: 60px 0 100px;
            background: white;
        }

        .masonry-grid {
            column-count: 4;
            column-gap: 20px;
            margin-top: 30px;
        }

        @media (max-width: 1200px) {
            .masonry-grid {
                column-count: 3;
            }
        }

        @media (max-width: 768px) {
            .masonry-grid {
                column-count: 2;
            }
        }

        @media (max-width: 480px) {
            .masonry-grid {
                column-count: 1;
            }
        }

        .masonry-item {
            break-inside: avoid;
            margin-bottom: 20px;
            position: relative;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .masonry-item:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
        }

        .masonry-item:hover .gallery-img {
            transform: scale(1.05);
        }

        .gallery-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
            color: white;
            padding: 30px 20px 20px;
            opacity: 0;
            transition: var(--transition);
            transform: translateY(20px);
        }

        .masonry-item:hover .gallery-overlay {
            opacity: 1;
            transform: translateY(0);
        }

        .gallery-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 8px;
            color: white;
        }

        .gallery-category {
            font-size: 0.9rem;
            opacity: 0.9;
            background: var(--gradient-gallery);
            padding: 4px 12px;
            border-radius: 20px;
            display: inline-block;
        }

        /* Image Counter */
        .image-counter {
            text-align: center;
            margin-top: 40px;
            padding: 20px;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: var(--border-radius);
            max-width: 300px;
            margin-left: auto;
            margin-right: auto;
        }

        .counter-number {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--primary);
            display: block;
            margin-bottom: 10px;
            background: var(--gradient-gallery);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .counter-label {
            font-size: 1.1rem;
            color: #666;
        }

        /* Lightbox Customization */
        .lg-backdrop {
            background: rgba(0, 0, 0, 0.9);
        }

        .lg-toolbar {
            background: rgba(0, 0, 0, 0.5);
        }

        .lg-actions .lg-next, .lg-actions .lg-prev {
            background: var(--gradient-gallery);
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
        }


        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }
            
            .filter-buttons {
                gap: 10px;
            }
            
            .filter-btn {
                padding: 10px 20px;
                font-size: 0.9rem;
            }
            
            .hero-section {
                padding: 100px 0 60px;
            }
            
            .gallery-section {
                padding: 40px 0 80px;
            }
        }

        /* Loading Animation */
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100px;
        }

        .loading-dot {
            width: 12px;
            height: 12px;
            margin: 0 5px;
            background: var(--gradient-gallery);
            border-radius: 50%;
            animation: loading 1.4s infinite ease-in-out;
        }

        .loading-dot:nth-child(1) { animation-delay: -0.32s; }
        .loading-dot:nth-child(2) { animation-delay: -0.16s; }

        @keyframes loading {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1); }
        }

        /* Floating Elements */
        .floating-elements {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .floating-element {
            position: absolute;
            width: 100px;
            height: 100px;
            background: var(--gradient-gallery);
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            opacity: 0.1;
            animation: float 20s infinite ease-in-out;
        }

        .floating-element:nth-child(1) {
            top: 10%;
            left: 5%;
            animation-delay: 0s;
        }

        .floating-element:nth-child(2) {
            top: 60%;
            right: 10%;
            animation-delay: 5s;
            background: var(--gradient-accent);
        }		
		
		 :root {
            --primary: #2c3e50;
            --secondary: #3498db;
            --accent: #e74c3c;
            --success: #27ae60;
            --light: #f8f9fa;
            --dark: #2c3e50;
            --gradient-primary: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
            --gradient-accent: linear-gradient(135deg, #e74c3c 0%, #f39c12 100%);
            --gradient-success: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
            --shadow: 0 10px 30px rgba(0,0,0,0.1);
            --shadow-hover: 0 20px 40px rgba(0,0,0,0.15);
            --border-radius: 20px;
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

       

        /* Section Styling */
        .content-section {
            padding: 80px 0;
        }

        .section-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .section-title {
            font-size: 2.8rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--accent);
            border-radius: 2px;
        }

        .section-subtitle {
            font-size: 1.1rem;
            color: #666;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.8;
        }

        /* Contact Cards */
        .contact-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

        .contact-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 40px 30px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            border: 2px solid transparent;
            background: linear-gradient(white, white) padding-box,
                        var(--gradient-primary) border-box;
            text-align: center;
        }

        .contact-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
        }

        .contact-icon {
            width: 80px;
            height: 80px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2.5rem;
            margin: 0 auto 25px;
            transition: var(--transition);
        }

        .contact-card:hover .contact-icon {
            transform: scale(1.1);
            background: var(--gradient-accent);
        }

        .contact-card h3 {
            font-size: 1.5rem;
            color: var(--primary);
            margin-bottom: 15px;
            font-weight: 700;
        }

        .contact-card p {
            color: #666;
            line-height: 1.7;
            margin-bottom: 15px;
        }

        .contact-link {
            color: var(--secondary);
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
        }

        .contact-link:hover {
            color: var(--accent);
            padding-left: 5px;
        }

        /* Contact Form */
        .contact-form-container {
            background: white;
            border-radius: var(--border-radius);
            padding: 50px;
            box-shadow: var(--shadow);
            margin-top: 50px;
        }

       
        /* Map Container */
        .map-container {
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            margin-top: 50px;
        }

        .map-container iframe {
            width: 100%;
            height: 400px;
            border: none;
        }

        /* Success Message */
        .alert-success-custom {
            background: var(--gradient-success);
            color: white;
            padding: 20px 30px;
            border-radius: 12px;
            margin-bottom: 30px;
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Alternate Background Sections */
        .alt-bg {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        }

        /* Floating Elements */
        .floating-elements {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .floating-element {
            position: absolute;
            width: 100px;
            height: 100px;
            background: var(--gradient-primary);
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            opacity: 0.1;
            animation: float 20s infinite ease-in-out;
        }

        .floating-element:nth-child(1) {
            top: 10%;
            left: 5%;
            animation-delay: 0s;
        }

        .floating-element:nth-child(2) {
            top: 60%;
            right: 10%;
            animation-delay: 5s;
            background: var(--gradient-accent);
        }

        /* Animations */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }

        .animate-on-scroll.visible {
            opacity: 1;
            transform: translateY(0);
        }

  

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }
            
            .section-title {
                font-size: 2.2rem;
            }
            
            .content-section {
                padding: 60px 0;
            }
            
            .contact-grid {
                grid-template-columns: 1fr;
            }
            
            .contact-form-container {
                padding: 30px 20px;
            }
            
            .contact-card {
                padding: 30px 20px;
            }
        }

        /* Grid System */
        .row {
            display: flex;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
        }

        .col-md-6, .col-md-12 {
            position: relative;
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
        }
.form-group {
            margin-bottom: 25px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--primary);
            font-size: 1.1rem;
        }

        .form-control-custom {
            width: 100%;
            padding: 5px 10px;
            border: 2px solid #e9ecef;
            border-radius: 12px;
            font-size: 1rem;
            transition: var(--transition);
            background: #f8f9fa;
        }

        .form-control-custom:focus {
            outline: none;
            border-color: var(--secondary);
            background: white;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
        }

        .form-control-custom.textarea {
            min-height: 50px;
            resize: vertical;
        }

        .btn-submit {
            background: var(--gradient-primary);
            color: white;
            border: none;
            padding: 9px 40px;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: inline-block;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .btn-submit:hover {
            background: var(--gradient-accent);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }
        @media (min-width: 768px) {
            .col-md-6 {
                flex: 0 0 50%;
                max-width: 50%;
            }
            .col-md-12 {
                flex: 0 0 100%;
                max-width: 100%;
            }
        }
		
:root {
            --primary: #2c3e50;
            --secondary: #3498db;
            --accent: #e74c3c;
            --success: #27ae60;
            --warning: #f39c12;
            --info: #17a2b8;
            --light: #f8f9fa;
            --dark: #2c3e50;
            --gradient-primary: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
            --gradient-accent: linear-gradient(135deg, #e74c3c 0%, #f39c12 100%);
            --gradient-success: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
            --gradient-info: linear-gradient(135deg, #17a2b8 0%, #3498db 100%);
            --gradient-warning: linear-gradient(135deg, #f39c12 0%, #f1c40f 100%);
            --shadow: 0 10px 30px rgba(0,0,0,0.1);
            --shadow-hover: 0 20px 40px rgba(0,0,0,0.15);
            --border-radius: 20px;
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        

        /* Section Styling */
        .content-section {
            padding: 80px 0;
        }

        
        /* Event Category Badge */
        .category-badge {
            display: inline-block;
            background: var(--gradient-primary);
            color: white;
            padding: 8px 25px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1rem;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(44, 62, 80, 0.2);
        }

        /* Event Cards */
        .events-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

        .event-card {
            background: white;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            height: 100%;
            position: relative;
            border: 2px solid transparent;
            background: linear-gradient(white, white) padding-box,
                        linear-gradient(var(--light), var(--light)) border-box;
        }

        .event-card:hover {
            transform: translateY(-15px);
            box-shadow: var(--shadow-hover);
            border-color: var(--secondary);
        }

        .event-icon-wrapper {
            width: 80px;
            height: 80px;
            background: var(--gradient-primary);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2.5rem;
            margin: 0 auto 25px;
            transition: var(--transition);
        }

        .event-card:hover .event-icon-wrapper {
            transform: scale(1.1) rotate(10deg);
            background: var(--gradient-accent);
        }

        .event-card h3 {
            font-size: 1.5rem;
            color: var(--primary);
            margin-bottom: 15px;
            font-weight: 700;
            text-align: center;
        }

        .event-card p {
            color: #666;
            line-height: 1.7;
            margin-bottom: 20px;
            text-align: center;
        }

        .event-details {
            padding: 30px;
        }

        /* Game Specific Cards */
        .game-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 25px;
            box-shadow: var(--shadow);
            transition: var(--transition);
            text-align: center;
            border: 3px solid transparent;
            background: linear-gradient(white, white) padding-box,
                        var(--gradient-success) border-box;
        }

        .game-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
        }

        .game-icon {
            width: 70px;
            height: 70px;
            background: var(--gradient-success);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2rem;
            margin: 0 auto 20px;
            transition: var(--transition);
        }

        .game-card:hover .game-icon {
            transform: scale(1.1);
            background: var(--gradient-accent);
        }

        .game-card h4 {
            font-size: 1.3rem;
            color: var(--primary);
            margin-bottom: 15px;
            font-weight: 700;
        }

        /* Alternate Background Sections */
        .alt-bg {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        }

        .gradient-bg {
            background: linear-gradient(135deg, #e8f4fc 0%, #f0f9ff 100%);
        }

        /* Category Header */
        .category-header {
            text-align: center;
            margin-bottom: 50px;
            padding: 30px;
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            position: relative;
            overflow: hidden;
        }

        .category-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: var(--gradient-primary);
        }

        .category-number {
            display: inline-block;
            width: 40px;
            height: 40px;
            background: var(--gradient-accent);
            color: white;
            border-radius: 50%;
            line-height: 40px;
            font-weight: 700;
            margin-right: 15px;
        }

        /* Countdown Timer */
        .countdown-timer {
            background: var(--gradient-primary);
            color: white;
            padding: 20px;
            border-radius: var(--border-radius);
            text-align: center;
            margin-top: 40px;
        }

        .timer-numbers {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 15px;
        }

        .timer-unit {
            background: rgba(255,255,255,0.2);
            padding: 10px 15px;
            border-radius: 10px;
            min-width: 70px;
        }

        .timer-value {
            font-size: 2rem;
            font-weight: 700;
        }

        .timer-label {
            font-size: 0.9rem;
            opacity: 0.9;
        }

        /* Register Button */
        .register-btn {
            display: inline-block;
            background: var(--gradient-success);
            color: white;
            padding: 12px 35px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1.1rem;
            text-decoration: none;
            transition: var(--transition);
            border: none;
            cursor: pointer;
            margin-top: 20px;
            box-shadow: 0 5px 15px rgba(39, 174, 96, 0.3);
        }

        .register-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(39, 174, 96, 0.4);
            color: white;
            background: var(--gradient-accent);
        }

        /* Floating Elements */
        .floating-elements {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .floating-element {
            position: absolute;
            width: 100px;
            height: 100px;
            background: var(--gradient-primary);
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            opacity: 0.1;
            animation: float 20s infinite ease-in-out;
        }

        .floating-element:nth-child(1) {
            top: 10%;
            left: 5%;
            animation-delay: 0s;
        }

        .floating-element:nth-child(2) {
            top: 60%;
            right: 10%;
            animation-delay: 5s;
            background: var(--gradient-accent);
        }

        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        }

        /* Animations */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }

        .animate-on-scroll.visible {
            opacity: 1;
            transform: translateY(0);
        }

      

        /* Games Grid */
        .games-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 15px;
            margin-top: 30px;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }
            
            .section-title {
                font-size: 2.2rem;
            }
            
            .content-section {
                padding: 60px 0;
            }
            
            .events-grid {
                grid-template-columns: 1fr;
            }
            
            .games-grid {
                grid-template-columns: 1fr;
            }
            
            .timer-numbers {
                flex-wrap: wrap;
                gap: 10px;
            }
            
            .timer-unit {
                min-width: 60px;
                padding: 8px 10px;
            }
            
            .timer-value {
                font-size: 1.5rem;
            }
        }

        /* Event Status Badge */
        .event-status {
            position: absolute;
            top: 20px;
            right: 20px;
            background: var(--gradient-success);
            color: white;
            padding: 5px 15px;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 600;
            z-index: 2;
        }

        .event-status.upcoming {
            background: var(--gradient-info);
        }

        .event-status.ongoing {
            background: var(--gradient-warning);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(243, 156, 18, 0); }
            100% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0); }
        }

        /* Featured Event */
        .featured-event {
            background: linear-gradient(135deg, var(--primary) 0%, #2c5282 100%);
            color: white;
            border-radius: var(--border-radius);
            padding: 40px;
            margin: 40px 0;
            position: relative;
            overflow: hidden;
        }

        .featured-event::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.05)" d="M0,160L48,176C96,192,192,224,288,213.3C384,203,480,149,576,138.7C672,128,768,160,864,176C960,192,1056,192,1152,170.7C1248,149,1344,107,1392,85.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
            background-size: cover;
            animation: wave 15s linear infinite;
        }

        .featured-content {
            position: relative;
            z-index: 2;
        }