/* ==================== TECHKERA SOLUTION - BRAND INSPIRED DESIGN ==================== */
/* Design inspired by the Techkera logo's curved crescent elements */
/* Color Palette: Teal (#5B9AA9), White, Dark Gray */

:root {
  --techkera-teal: #5B9AA9;
  --techkera-teal-light: #7BB4C3;
  --techkera-teal-dark: #4A7F8D;
  --techkera-dark: #2C3E50;
  --techkera-light: #F8FAFB;
  --techkera-white: #FFFFFF;
  --techkera-accent: #34495E;
}

/* Curved Background Elements - Logo Inspired */
.curved-background {
  position: relative;
  overflow: hidden;
}

.curved-background::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border: 80px solid var(--techkera-teal);
  border-radius: 50%;
  opacity: 0.08;
  top: -200px;
  right: -200px;
  z-index: 0;
  clip-path: inset(0 50% 0 0);
}

.curved-background::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border: 60px solid var(--techkera-teal-light);
  border-radius: 50%;
  opacity: 0.06;
  bottom: -150px;
  left: -150px;
  z-index: 0;
  clip-path: inset(0 50% 0 0);
}

/* Hero Section - Techkera Style */
.hero-section {
  position: relative;
  background: linear-gradient(135deg, #F8FAFB 0%, #FFFFFF 100%);
  padding: 120px 0 80px;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  width: 800px;
  height: 800px;
  border: 100px solid var(--techkera-teal);
  border-radius: 50%;
  opacity: 0.05;
  top: -300px;
  right: -300px;
  z-index: 0;
  clip-path: inset(0 50% 0 0);
  animation: float 20s ease-in-out infinite;
}

.hero-section::after {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border: 70px solid var(--techkera-teal-light);
  border-radius: 50%;
  opacity: 0.04;
  bottom: -200px;
  left: -200px;
  z-index: 0;
  clip-path: inset(0 50% 0 0);
  animation: float 15s ease-in-out infinite reverse;
}

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

/* Page Headers with Curved Elements */
.page-header {
  background: linear-gradient(135deg, var(--techkera-light) 0%, var(--techkera-white) 100%);
  padding: 8rem 0 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border: 60px solid var(--techkera-teal);
  border-radius: 50%;
  opacity: 0.06;
  top: -150px;
  right: -150px;
  z-index: 0;
  clip-path: inset(0 50% 0 0);
}

.page-header::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border: 40px solid var(--techkera-teal-light);
  border-radius: 50%;
  opacity: 0.05;
  bottom: -100px;
  left: -100px;
  z-index: 0;
  clip-path: inset(0 50% 0 0);
}

.page-header .container {
  position: relative;
  z-index: 1;
}

.page-header h1 {
  font-size: 3rem;
  font-weight: 800;
  color: var(--techkera-dark);
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.page-header h1 span {
  color: var(--techkera-teal);
}

/* Section Decorations */
.section {
  position: relative;
}

.section.with-curves::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border: 50px solid var(--techkera-teal);
  border-radius: 50%;
  opacity: 0.04;
  top: 50%;
  right: -150px;
  transform: translateY(-50%);
  z-index: 0;
  clip-path: inset(0 50% 0 0);
}

/* Cards with Curved Accent */
.card-with-curve {
  position: relative;
  background: white;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(91, 154, 169, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
}

.card-with-curve::before {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  border: 20px solid var(--techkera-teal);
  border-radius: 50%;
  opacity: 0.06;
  top: -50px;
  right: -50px;
  clip-path: inset(0 50% 0 0);
  transition: all 0.3s ease;
}

.card-with-curve:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(91, 154, 169, 0.15);
}

.card-with-curve:hover::before {
  opacity: 0.12;
  transform: scale(1.1);
}

/* Button Styling - Techkera Theme */
.btn-techkera {
  background: var(--techkera-teal);
  color: white;
  padding: 14px 32px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  border: 2px solid var(--techkera-teal);
  position: relative;
  overflow: hidden;
}

.btn-techkera::before {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  border: 15px solid white;
  border-radius: 50%;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  clip-path: inset(0 50% 0 0);
  transition: all 0.4s ease;
}

.btn-techkera:hover {
  background: var(--techkera-teal-dark);
  border-color: var(--techkera-teal-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(91, 154, 169, 0.3);
}

.btn-techkera:hover::before {
  opacity: 0.2;
  transform: translate(-50%, -50%) scale(1);
}

/* Service Cards with Curved Elements */
.service-card {
  background: white;
  border-radius: 16px;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  border: 1px solid rgba(91, 154, 169, 0.1);
}

.service-card::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border: 30px solid var(--techkera-teal);
  border-radius: 50%;
  opacity: 0;
  top: -50px;
  right: -50px;
  clip-path: inset(0 50% 0 0);
  transition: all 0.4s ease;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(91, 154, 169, 0.15);
  border-color: var(--techkera-teal);
}

.service-card:hover::before {
  opacity: 0.08;
}

/* Footer with Curves */
footer {
  position: relative;
  background: var(--techkera-dark);
  color: white;
  overflow: hidden;
}

footer::before {
  content: '';
  position: absolute;
  width: 700px;
  height: 700px;
  border: 80px solid var(--techkera-teal);
  border-radius: 50%;
  opacity: 0.03;
  top: -250px;
  right: -250px;
  clip-path: inset(0 50% 0 0);
}

footer::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border: 60px solid var(--techkera-teal-light);
  border-radius: 50%;
  opacity: 0.02;
  bottom: -200px;
  left: -200px;
  clip-path: inset(0 50% 0 0);
}

/* Decorative Curves for Various Sections */
.curve-decoration-1 {
  position: absolute;
  width: 300px;
  height: 300px;
  border: 40px solid var(--techkera-teal);
  border-radius: 50%;
  opacity: 0.05;
  clip-path: inset(0 50% 0 0);
  pointer-events: none;
  z-index: 0;
}

.curve-decoration-2 {
  position: absolute;
  width: 250px;
  height: 250px;
  border: 35px solid var(--techkera-teal-light);
  border-radius: 50%;
  opacity: 0.04;
  clip-path: inset(0 50% 0 0);
  pointer-events: none;
  z-index: 0;
}

.curve-decoration-3 {
  position: absolute;
  width: 180px;
  height: 180px;
  border: 25px solid var(--techkera-teal);
  border-radius: 50%;
  opacity: 0.06;
  clip-path: inset(0 50% 0 0);
  pointer-events: none;
  z-index: 0;
}

/* Animated Floating Curves */
@keyframes floatSlow {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(20px, -20px) rotate(3deg);
  }
  66% {
    transform: translate(-15px, 15px) rotate(-2deg);
  }
}

.floating-curve {
  animation: floatSlow 25s ease-in-out infinite;
}

/* Tagline Styling */
.techkera-tagline {
  font-size: 1.2rem;
  color: var(--techkera-teal);
  font-weight: 500;
  font-style: italic;
  margin-top: 0.5rem;
  letter-spacing: 0.5px;
}

/* Hero Content Styling */
.hero-content h1 {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--techkera-dark);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.hero-content .tagline {
  font-size: 1.5rem;
  color: var(--techkera-teal);
  font-weight: 500;
  font-style: italic;
  margin-bottom: 1.5rem;
  letter-spacing: 1px;
}

.hero-content p {
  font-size: 1.2rem;
  color: var(--techkera-accent);
  margin-bottom: 2rem;
  max-width: 600px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .curved-background::before {
    width: 400px;
    height: 400px;
    border-width: 50px;
  }

  .curved-background::after {
    width: 300px;
    height: 300px;
    border-width: 40px;
  }

  .hero-section::before {
    width: 500px;
    height: 500px;
    border-width: 60px;
  }

  .hero-section::after {
    width: 400px;
    height: 400px;
    border-width: 50px;
  }

  .hero-content h1 {
    font-size: 2.5rem;
  }

  .hero-content .tagline {
    font-size: 1.2rem;
  }
}