:root {

  /* Primary Colors - Deep Teal-Blue (trust, reliability) */

  --primary: #006778;

  /* Lighter Teal */

  --primary-light: #5DACBD;

  /* Darker Teal */

  --primary-dark: #004954;



  /* Secondary Colors - Warm Gold (luxury, comfort) */

  --secondary: #FFA630;

  /* Light Gold */

  --secondary-light: #FFC172;



  /* Accent Colors - Earthy Green (nature, eco-friendly) */

  --accent: #4CAF50;

  /* Darker Green */

  --accent-dark: #388E3C;



  /* Neutral Colors */

  --light: #F8F9FA;

  /* Light Gray (backgrounds) */

  --light-accent: #E3F2FD;

  /* Very Light Blue (secondary backgrounds) */

  --dark: #263238;

  /* Dark Blue-Gray (text) */

  --darker: #1A237E;

  /* Deep Blue (headings) */



  /* Text Colors */

  --text: #37474F;

  /* Dark Gray (main text) */

  --text-light: #546E7A;

  /* Medium Gray (secondary text) */

  

  /* Shadows */

  --shadow: 0 4px 6px -1px rgba(0, 103, 120, 0.1), 0 2px 4px -1px rgba(0, 103, 120, 0.06);

  --shadow-lg: 0 10px 15px -3px rgba(0, 103, 120, 0.1), 0 4px 6px -2px rgba(0, 103, 120, 0.05);



  /* RGB Values for Gradients and Shadows */

  --primary-rgb: 0, 103, 120;

  --secondary-rgb: 255, 166, 48;

}



/* Global Styles & Utilities */

*,

::after,

::before {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

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

  color: var(--text);

  overflow-x: hidden;

  background-color: var(--light);

  line-height: 1.6;

}



.row {

  --bs-gutter-x: 1.5rem;

  --bs-gutter-y: 1.5rem;

  display: flex;

  flex-wrap: wrap;

  margin-top: calc(-1 * var(--bs-gutter-y));

  margin-right: calc(-.5 * var(--bs-gutter-x));

  margin-left: calc(-.5 * var(--bs-gutter-x));

}



.container {

  max-width: 1140px;

  margin: 0 auto;

  padding: 0 15px;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  font-weight: 700;

  color: var(--dark);

}



.section-title {

  position: relative;

  margin-bottom: 4rem;

  text-align: center;

}



.section-title h2 {

  font-size: 2.5rem;

  color: var(--dark);

  margin-bottom: 1rem;

  position: relative;

  display: inline-block;

}



.section-title h2::after {

  content: '';

  position: absolute;

  bottom: -10px;

  left: 50%;

  transform: translateX(-50%);

  width: 80px;

  height: 4px;

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

  border-radius: 2px;

}



.section-title p {

  max-width: 700px;

  margin: 0 auto;

  color: var(--text-light);

  font-size: 1.1rem;

}



/* Buttons */

.btn {

  padding: 0.8rem 2rem;

  font-weight: 600;

  border-radius: 50px;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

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

  position: relative;

  overflow: hidden;

  z-index: 1;

  text-decoration: none;

}



.btn-primary {

  background-color: white;

  border-color: white;

  color: var(--primary);

  transform: translateY(0);

}



.btn-primary::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

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

  z-index: -1;

  transform: scaleX(0);

  transform-origin: right;

  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



.btn-primary:hover {

  color: white;

  transform: translateY(-3px);

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}



.btn-primary:hover::before {

  transform: scaleX(1);

  transform-origin: left;

}



.btn-outline-primary {

  background-color: var(--primary);

  border: 2px solid white;

  color: white;

}



.btn-outline-primary::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: white;

  z-index: -1;

  transform: scaleX(0);

  transform-origin: right;

  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



.btn-outline-primary:hover {

  color: var(--primary);

}



.btn-outline-primary:hover::before {

  transform: scaleX(1);

  transform-origin: left;

}



/* Animations */

@keyframes fadeInUp {

  from {

    opacity: 0;

    transform: translateY(20px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes fadeInContact {

  from {

    opacity: 0;

    transform: translateY(20px);

  }



  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes float {

  0% {

    transform: translateY(0px);

  }



  50% {

    transform: translateY(-15px);

  }



  100% {

    transform: translateY(0px);

  }

}



/* Animate on scroll */

.animate {

  opacity: 0;

  transform: translateY(30px);

  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

}



.animate.animated {

  opacity: 1;

  transform: translateY(0);

}



.delay-1 {

  transition-delay: 0.1s;

}



.delay-2 {

  transition-delay: 0.2s;

}



.delay-3 {

  transition-delay: 0.3s;

}



.delay-4 {

  transition-delay: 0.4s;

}



/* Navigation */

.navbar {

  background-color: rgba(255, 255, 255, 0.95);

  box-shadow: var(--shadow);

  padding: 1.2rem 0;

  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  backdrop-filter: blur(10px);

  position: fixed;

  width: 100%;

  top: 0;

  left: 0;

  z-index: 1000;

}



.navbar.scrolled {

  padding: 0.8rem 0;

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

}



.navbar-brand {

  font-weight: 700;

  font-size: 1.8rem;

  color: var(--primary) !important;

  display: flex;

  align-items: center;

  text-decoration: none;

}



.navbar-brand img {

  height: 50px;

  margin-right: 10px;

}



.nav-link {

  color: var(--dark) !important;

  font-weight: 500;

  margin: 0 0.5rem;

  position: relative;

  padding: 0.5rem 1rem !important;

  transition: all 0.3s ease;

  text-decoration: none;

}



.nav-link::after {

  content: '';

  position: absolute;

  width: 0;

  height: 3px;

  background: var(--primary);

  bottom: 0;

  left: 0;

  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  border-radius: 3px;

}



.nav-link:hover::after,

.nav-link.active::after {

  width: 100%;

}



.nav-link:hover {

  color: var(--primary) !important;

}



/* Hero Section */

.hero {

  height: 100vh;

  min-height: 800px;

  background: linear-gradient(135deg, rgba(120, 0, 84, 0.9), transparent, transparent, transparent, transparent,  rgba(0, 73, 84, 0.8)),

    url('../img/hero.jpg');

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  display: flex;

  align-items: center;

  color: white;

  text-align: center;

  position: relative;

  overflow: hidden;

}



.hero::before {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 100px;

  background: linear-gradient(to top, var(--light), transparent);

  z-index: 1;

}



.hero-content {

  position: relative;

  z-index: 2;

  transform: translateY(20px);

  opacity: 0;

  animation: fadeInUp 1s ease forwards 0.3s;

}



.hero h1 {

  font-size: 3.5rem;

  margin-bottom: 1.5rem;

  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  line-height: 1.2;

  color: white;

}



.hero p {

  font-size: 1.25rem;

  max-width: 700px;

  margin: 0 auto 2.5rem;

  opacity: 0.9;

}



/* Service Cards */

.service-card {

  border: none;

  border-radius: 12px;

  overflow: hidden;

  box-shadow: var(--shadow);

  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  margin-bottom: 2rem;

  height: 100%;

  background-color: white;

  position: relative;

  z-index: 1;

  transform: translateY(0);

}



.service-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

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

  z-index: -1;

  opacity: 0;

  transition: opacity 0.4s ease;

}



.service-card:hover {

  transform: translateY(-10px);

  box-shadow: var(--shadow-lg);

  color: white;

}



.service-card:hover::before {

  opacity: 1;

}



.service-card:hover .card-title,

.service-card:hover .card-text,

.service-card:hover .service-icon {

  color: white !important;

}



.service-card .card-body {

  padding: 2rem;

  position: relative;

  z-index: 2;

}



.service-card .card-title {

  color: var(--dark);

  font-weight: 600;

  font-size: 1.4rem;

  margin-bottom: 1rem;

  transition: color 0.3s ease;

}



.service-card .card-text {

  color: var(--text-light);

  margin-bottom: 1.5rem;

  transition: color 0.3s ease;

}



.service-icon {

  font-size: 2.5rem;

  color: var(--primary);

  margin-bottom: 1.5rem;

  transition: all 0.3s ease;

}



.service-link {

  display: inline-flex;

  align-items: center;

  color: var(--primary);

  font-weight: 500;

  text-decoration: none;

  transition: all 0.3s ease;

}



.service-link i {

  margin-left: 0.5rem;

  transition: transform 0.3s ease;

}



.service-card:hover .service-link {

  color: white;

}



.service-link:hover i {

  transform: translateX(5px);

}



/* About Section */

.about-section {

  padding: 6rem 0;

  background-color: var(--light);

  position: relative;

  overflow: hidden;

}



.about-img {

  border-radius: 12px;

  box-shadow: var(--shadow-lg);

  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  transform: perspective(1000px) rotateY(0deg);

}



.about-img:hover {

  transform: perspective(1000px) rotateY(10deg);

}



.about-text h2 {

  color: var(--dark);

  margin-bottom: 1.5rem;

  position: relative;

  display: inline-block;

}



.about-text h2::after {

  content: '';

  position: absolute;

  bottom: -10px;

  left: 0;

  width: 60px;

  height: 4px;

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

  border-radius: 2px;

}



.about-text p {

  margin-bottom: 1.5rem;

  color: var(--text);

}



.feature-list {

  list-style: none;

  padding-left: 0;

}



.feature-list li {

  margin-bottom: 1rem;

  position: relative;

  padding-left: 2rem;

}



.feature-list li::before {

  content: '\f00c';

  font-family: 'Font Awesome 6 Free';

  font-weight: 900;

  position: absolute;

  left: 0;

  top: 0;

  color: var(--secondary);

}



/* Feature Cards */

.feature-card {

  background: white;

  border-radius: 16px;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);

  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

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

  text-align: center;

  overflow: hidden;

  position: relative;

  z-index: 1;

  margin-bottom: 2rem;

  height: 100%;

}



.feature-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

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

  z-index: -1;

  opacity: 0;

  transition: opacity 0.4s ease;

}



.feature-card:hover {

  transform: translateY(-10px);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);

  color: white;

}



.feature-card:hover::before {

  opacity: 1;

}



.feature-card:hover .feature-icon,

.feature-card:hover h5,

.feature-card:hover p {

  color: white !important;

}



.feature-icon {

  font-size: 2.5rem;

  color: var(--primary);

  margin-bottom: 1.5rem;

  transition: all 0.4s ease;

  display: inline-block;

}



.feature-card:hover .feature-icon {

  transform: scale(1.2) rotate(10deg);

}



/* Pricing Section */

.pricing {

  padding: 6rem 0;

  background-color: white;

  position: relative;

}



.pricing-card {

  border: none;

  border-radius: 12px;

  box-shadow: var(--shadow-lg);

  padding: 3rem;

  text-align: center;

  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  margin-bottom: 2rem;

  background: white;

  position: relative;

  overflow: hidden;

  transform: translateY(0);

}



.pricing-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 5px;

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

}



.pricing-card:hover {

  transform: translateY(-10px);

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

}



.pricing-card h3 {

  font-weight: 600;

  margin-bottom: 1.5rem;

  color: var(--dark);

}



.pricing-card .price {

  font-size: 3rem;

  font-weight: 700;

  margin: 1.5rem 0;

  color: var(--primary);

  position: relative;

  display: inline-block;

}



.pricing-card .price span {

  font-size: 1rem;

  color: var(--text-light);

  font-weight: 400;

}



.pricing-card p {

  margin-bottom: 1.5rem;

  color: var(--text);

}



.pricing-card .highlight-text {

  font-weight: 600;

  color: var(--primary);

  margin: 1.5rem 0;

  font-style: italic;

}



/* Contact Section */

#contact {

  padding: 6rem 0;

  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.05), rgba(var(--accent-rgb), 0.05));

  position: relative;

  overflow: hidden;

}



.contact-info {

  background: white;

  padding: 2.5rem;

  border-radius: 16px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

  height: 100%;

  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);

  position: relative;

  overflow: hidden;

  z-index: 1;

  margin-bottom: 2rem;

}



.contact-info::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 5px;

  height: 100%;

  background: linear-gradient(to bottom, var(--primary), var(--secondary));

  transition: all 0.5s ease;

}



.contact-info:hover {

  transform: translateY(-10px);

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);

}



.contact-info:hover::before {

  width: 8px;

}



.contact-info h4 {

  color: var(--dark);

  font-size: 1.4rem;

  margin-bottom: 1.5rem;

  position: relative;

  padding-bottom: 10px;

  display: inline-block;

}



.contact-info h4::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 50px;

  height: 3px;

  background: var(--accent);

  border-radius: 3px;

  transition: all 0.3s ease;

}



.contact-info:hover h4::after {

  width: 80px;

}



.contact-info p {

  margin-bottom: 2rem;

  color: var(--text-light);

}



.contact-form {

  background: white;

  padding: 2.5rem;

  border-radius: 16px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);

}



.contact-form:hover {

  transform: translateY(-10px);

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);

}



.form-control {

  border: 1px solid rgba(0, 0, 0, 0.1);

  padding: 1rem;

  border-radius: 8px;

  margin-bottom: 1.5rem;

  transition: all 0.3s ease;

}



.form-control:focus {

  border-color: var(--primary);

  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);

}



textarea.form-control {

  min-height: 150px;

}



.submit-btn {

  width: 100%;

  padding: 1rem;

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

  color: white;

  border: none;

  border-radius: 8px;

  font-weight: 600;

  transition: all 0.3s ease;

  position: relative;

  overflow: hidden;

}



.submit-btn:hover {

  transform: translateY(-3px);

  box-shadow: 0 10px 20px rgba(139, 69, 19, 0.2);

}



/* Map */

.map-container {

  border-radius: 16px;

  overflow: hidden;

  box-shadow: var(--shadow-lg);

  margin-top: 3rem;

  transition: all 0.4s ease;

}



.map-container:hover {

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

}



.map-container iframe {

  width: 100%;

  height: 400px;

  border: none;

}



/* Footer */

.site-footer {

  background: linear-gradient(135deg, #2a3a3a, #1a2a2a);

  color: white;

  position: relative;

  overflow: hidden;

}



.site-footer::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 4px;

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

}



.footer-top {

  padding: 5rem 0 3rem;

  position: relative;

}



.footer-top::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 5%;

  width: 90%;

  height: 1px;

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

}



.footer-widget {

  margin-bottom: 2rem;

  transition: all 0.4s ease;

}



.footer-widget:hover {

  transform: translateY(-5px);

}



.footer-logo {

  display: inline-flex;

  align-items: center;

  font-weight: 700;

  font-size: 1.8rem;

  color: white;

  margin-bottom: 1.5rem;

  text-decoration: none !important;

  transition: all 0.3s ease;

}



.footer-logo:hover {

  color: var(--secondary);

}



.footer-logo img {

  height: 50px;

  margin-right: 15px;

  transition: all 0.3s ease;

}



.footer-logo:hover img {

  transform: rotate(-5deg) scale(1.05);

}



.footer-about {

  color: rgba(255, 255, 255, 0.7);

  line-height: 1.8;

  margin-bottom: 1.5rem;

}



.footer-widget h4 {

  color: white;

  font-size: 1.4rem;

  margin-bottom: 1.8rem;

  position: relative;

  padding-bottom: 10px;

}



.footer-widget h4::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 50px;

  height: 3px;

  background: var(--accent);

  border-radius: 3px;

}



.footer-menu {

  list-style: none;

  padding-left: 0;

}



.footer-menu li {

  margin-bottom: 0.8rem;

  position: relative;

  transition: all 0.3s ease;

}



.footer-menu li::before {

  content: '\f054';

  font-family: 'Font Awesome 6 Free';

  font-weight: 900;

  position: absolute;

  left: 0;

  top: 5px;

  color: var(--accent);

  font-size: 0.7rem;

  opacity: 0;

  transition: all 0.3s ease;

}



.footer-menu li:hover {

  transform: translateX(10px);

}



.footer-menu li:hover::before {

  opacity: 1;

  left: -15px;

}



.footer-menu a {

  color: rgba(255, 255, 255, 0.7);

  text-decoration: none;

  transition: all 0.3s ease;

  padding-left: 0;

  display: block;

}



.footer-menu a:hover {

  color: white;

  padding-left: 15px;

}



.footer-contact {

  list-style: none;

  padding-left: 0;

}



.footer-contact li {

  margin-bottom: 1.2rem;

  display: flex;

  align-items: flex-start;

}



.footer-contact i {

  color: var(--accent);

  margin-right: 15px;

  font-size: 1.1rem;

  margin-top: 3px;

  flex-shrink: 0;

  transition: all 0.3s ease;

}



.footer-contact span {

  color: rgba(255, 255, 255, 0.7);

  transition: all 0.3s ease;

}



.footer-contact a {

  color: rgba(255, 255, 255, 0.7);

  text-decoration: none;

  transition: all 0.3s ease;

}



.footer-contact li:hover i {

  transform: scale(1.2) rotate(10deg);

  color: var(--secondary);

}



.footer-contact li:hover span,

.footer-contact li:hover a {

  color: white;

}



.social-links {

  display: flex;

  gap: 15px;

  margin-top: 1.5rem;

}



.social-links a {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 42px;

  height: 42px;

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

  color: white;

  border-radius: 50%;

  font-size: 1.1rem;

  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

}



.social-links a:hover {

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

  transform: translateY(-5px) scale(1.1);

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);

}



.footer-bottom {

  padding: 2rem 0;

  background: rgba(0, 0, 0, 0.2);

}



.copyright-text {

  color: rgba(255, 255, 255, 0.6);

  font-size: 0.9rem;

  transition: all 0.3s ease;

}



.copyright-text:hover {

  color: white;

}



.footer-links {

  display: flex;

  justify-content: flex-end;

  gap: 20px;

}



.footer-links a {

  color: rgba(255, 255, 255, 0.6);

  text-decoration: none;

  font-size: 0.9rem;

  transition: all 0.3s ease;

  position: relative;

}



.footer-links a::after {

  content: '';

  position: absolute;

  bottom: -2px;

  left: 0;

  width: 0;

  height: 1px;

  background: var(--accent);

  transition: width 0.3s ease;

}



.footer-links a:hover {

  color: white;

}



.footer-links a:hover::after {

  width: 100%;

}



/* WhatsApp Float */

.whatsapp-float {

  position: fixed;

  width: 60px;

  height: 60px;

  bottom: 30px;

  right: 30px;

  background-color: #25d366;

  color: #FFF;

  border-radius: 50px;

  text-align: center;

  font-size: 30px;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

  z-index: 100;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  text-decoration: none;

}



.whatsapp-float:hover {

  color: #FFF;

  background-color: #128C7E;

  transform: scale(1.1) rotate(10deg);

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);

}



/* Back to Top Button */

.back-to-top {

  position: fixed;

  bottom: 100px;

  right: 30px;

  width: 50px;

  height: 50px;

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

  color: white;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.2rem;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

  z-index: 99;

  opacity: 0;

  visibility: hidden;

  transition: all 0.3s ease;

  text-decoration: none;

}



.back-to-top.active {

  opacity: 1;

  visibility: visible;

}



.back-to-top:hover {

  transform: translateY(-5px);

  box-shadow: 0 8px 20px rgba(139, 69, 19, 0.3);

}



/* Enhanced Gallery Styles */

.gallery-thumb {

  width: 100%;

  height: 220px;

  object-fit: cover;

  border-radius: 12px;

  cursor: pointer;

  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

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

  transform: perspective(1000px) translateZ(0);

}



.gallery-thumb:hover {

  transform: perspective(1000px) translateZ(20px) scale(1.05);

  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);

  z-index: 10;

}



.viewer-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.95);

  display: none;

  justify-content: center;

  align-items: center;

  z-index: 9999;

  flex-direction: column;

  padding: 20px;

  backdrop-filter: blur(8px);

  opacity: 0;

  transition: opacity 0.3s ease-out;

}



.viewer-overlay.active {

  display: flex;

  opacity: 1;

}



.viewer-image {

  max-width: 90%;

  max-height: 80%;

  border-radius: 12px;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

  transform: scale(0.9);

  transition: transform 0.3s ease-out;

}



.viewer-overlay.active .viewer-image {

  transform: scale(1);

}



.close-btn {

  position: absolute;

  top: 30px;

  right: 30px;

  color: #fff;

  font-size: 36px;

  cursor: pointer;

  z-index: 10000;

  transition: all 0.3s ease;

  text-shadow: 0 2px 4px rgba(0,0,0,0.3);

}



.close-btn:hover {

  transform: rotate(90deg) scale(1.2);

  color: var(--accent);

}



.nav-btn {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background: rgba(var(--primary-rgb), 0.8);

  border: none;

  color: white;

  font-size: 24px;

  padding: 12px 18px;

  cursor: pointer;

  border-radius: 50%;

  z-index: 10000;

  transition: all 0.3s ease;

  box-shadow: 0 4px 8px rgba(0,0,0,0.2);

}



.nav-btn:hover {

  background: var(--primary);

  transform: translateY(-50%) scale(1.1);

}



.nav-btn.prev {

  left: 30px;

}



.nav-btn.next {

  right: 30px;

}



/* Enhanced Testimonial Cards */

.testimonial-card {

  background: white;

  border-radius: 16px;

  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);

  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

  transform: translateY(0);

  overflow: hidden;

  margin-bottom: 2rem;

}



.testimonial-card:hover {

  transform: translateY(-10px);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);

}



.testimonial-card::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 4px;

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

  transform: scaleX(0);

  transform-origin: right;

  transition: transform 0.4s ease;

}



.testimonial-card:hover::after {

  transform: scaleX(1);

  transform-origin: left;

}



/* Enhanced Branch Cards */

.branch-card {

  background: white;

  border-radius: 16px;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);

  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

  position: relative;

  overflow: hidden;

  margin-bottom: 2rem;

}



.branch-card:hover {

  transform: translateY(-10px);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);

}



.branch-card::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 4px;

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

  transform: scaleX(0);

  transform-origin: right;

  transition: transform 0.4s ease;

}



.branch-card:hover::after {

  transform: scaleX(1);

  transform-origin: left;

}



.branch-icon {

  font-size: 2.5rem;

  color: var(--primary);

  transition: all 0.4s ease;

}



.branch-card:hover .branch-icon {

  transform: scale(1.2);

  color: var(--secondary);

}



/* Enhanced Video Gallery */

.video-gallery {

  padding: 5rem 0;

  background-color: #f8f9fa;

  position: relative;

}



.video-container {

  position: relative;

  padding-bottom: 56.25%;

  height: 0;

  overflow: hidden;

  border-radius: 16px;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);

  margin-bottom: 2rem;

  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

  transform: perspective(1000px) translateZ(0);

}



.video-container:hover {

  transform: perspective(1000px) translateZ(20px);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);

}



.video-container iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border: none;

}



.video-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 2.5rem;

}



.video-title {

  margin-top: 1.5rem;

  font-weight: 600;

  color: var(--dark);

  text-align: center;

  transition: color 0.3s ease;

}



.video-container:hover + .video-title {

  color: var(--primary);

}



/* Custom Icons with Animation */

.fa-users-class:before,

.fa-brain:before,

.fa-user-graduate:before,

.fa-hands-helping:before,

.fa-chess:before,

.fa-tools:before,

.fa-procedures:before,

.fa-book:before {

  font-family: 'Font Awesome 6 Free';

  font-weight: 900;

  display: inline-block;

  transition: transform 0.3s ease;

}



.feature-card:hover .fa-users-class:before,

.feature-card:hover .fa-brain:before,

.feature-card:hover .fa-user-graduate:before,

.feature-card:hover .fa-hands-helping:before,

.feature-card:hover .fa-chess:before,

.feature-card:hover .fa-tools:before,

.feature-card:hover .fa-procedures:before,

.feature-card:hover .fa-book:before {

  transform: scale(1.2) rotate(10deg);

}



/* Course List Enhancements */

.course-list {

  list-style: none;

  padding-left: 0;

}



.course-list li {

  margin-bottom: 0.75rem;

  position: relative;

  padding-left: 2rem;

  transition: all 0.3s ease;

}



.course-list li:hover {

  transform: translateX(5px);

}



.course-list li::before {

  content: '\f00c';

  font-family: 'Font Awesome 6 Free';

  font-weight: 900;

  position: absolute;

  left: 0;

  color: var(--primary);

  transition: all 0.3s ease;

}



.course-list li:hover::before {

  color: var(--secondary);

  transform: scale(1.2);

}



/* Responsive Styles */

@media (max-width: 1199.98px) {

  .hero h1 {

    font-size: 3rem;

  }

}



@media (max-width: 991.98px) {

  .hero {

    min-height: 700px;

  }



  .hero h1 {

    font-size: 2.5rem;

  }



  .about-img {

    margin-bottom: 3rem;

  }

}



@media (max-width: 768px) {

  .gallery-thumb {

    height: 180px;

  }

  .nav-btn {

    padding: 10px 15px;

    font-size: 20px;

  }

  .close-btn {

    top: 20px;

    right: 20px;

    font-size: 30px;

  }

}



@media (max-width: 767.98px) {

  .hero {

    height: auto;

    min-height: auto;

    padding: 8rem 0;

  }



  .hero h1 {

    font-size: 2.2rem;

  }



  .hero p {

    font-size: 1.1rem;

  }



  .section-title h2 {

    font-size: 2rem;

  }



  .pricing-card {

    padding: 2rem;

  }

  

  .footer-links {

    justify-content: center;

    margin-top: 1rem;

  }



  .copyright-text {

    text-align: center;

    margin-bottom: 1rem;

  }

}



@media (max-width: 575.98px) {

  .navbar-brand {

    font-size: 1.5rem;

  }



  .hero h1 {

    font-size: 2rem;

  }



  .btn-primary,

  .btn-outline-primary {

    padding: 0.7rem 1.5rem;

    font-size: 0.9rem;

  }



  .contact-info,

  .contact-form {

    padding: 1.5rem;

  }



  .whatsapp-float {

    width: 50px;

    height: 50px;

    font-size: 24px;

    bottom: 20px;

    right: 20px;

  }



  .back-to-top {

    width: 40px;

    height: 40px;

    font-size: 1rem;

    bottom: 80px;

    right: 20px;

  }

}