/* =======================================================
   YANTROMITRA WEBSITE
   STYLE.CSS PART 1

   Global Variables
   CSS Reset
   Typography
   Containers
   Buttons
   Utilities

======================================================= */

/* =====================================
   ROOT VARIABLES
===================================== */

:root {

   --primary: #6D4BC3;
   --secondary: #8A63D2;
   --accent: #F05A4A;
   --sun: #F8C600;

   --dark: #1F2937;
   --light: #F8FAFC;

   --white: #FFFFFF;

   --gray-50: #F9FAFB;
   --gray-100: #F3F4F6;
   --gray-200: #E5E7EB;
   --gray-300: #D1D5DB;
   --gray-400: #9CA3AF;
   --gray-500: #6B7280;
   --gray-600: #4B5563;
   --gray-700: #374151;
   --gray-800: #1F2937;
   --gray-900: #111827;

   --shadow-sm:
      0 2px 8px rgba(0, 0, 0, .05);

   --shadow:
      0 10px 30px rgba(0, 0, 0, .08);

   --shadow-lg:
      0 20px 50px rgba(0, 0, 0, .12);

   --shadow-xl:
      0 30px 80px rgba(0, 0, 0, .15);

   --radius-sm: 12px;
   --radius: 20px;
   --radius-lg: 30px;

   --transition: .3s ease;

   --max-width: 1400px;

}

/* =====================================
   RESET
===================================== */

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {

   scroll-behavior: smooth;

   -webkit-text-size-adjust: 100%;

}

body {

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

   background: var(--light);

   color: var(--dark);

   overflow-x: hidden;

   line-height: 1.7;

}



.site-wrapper {
   width: 90%;
   margin: auto;
}

/* Tablet */

/*  */

/* Mobile */

@media (max-width:768px) {
   .site-wrapper {
      width: 100%;
      margin: auto;
   }

}

/*  */



img {

   display: block;

   max-width: 100%;

   height: auto;

}

a {

   text-decoration: none;

   color: inherit;

}

ul {

   list-style: none;

}

button {

   border: none;

   outline: none;

   cursor: pointer;

   font-family: inherit;

}

input,
textarea,
select {

   font-family: inherit;

   outline: none;

}

/* =====================================
   SELECTION
===================================== */

::selection {

   background: var(--primary);

   color: white;

}

::-moz-selection {

   background: var(--primary);

   color: white;

}

/* =====================================
   SCROLLBAR
===================================== */

::-webkit-scrollbar {

   width: 10px;

}

::-webkit-scrollbar-track {

   background: var(--gray-100);

}

::-webkit-scrollbar-thumb {

   background: var(--primary);

   border-radius: 999px;

}

::-webkit-scrollbar-thumb:hover {

   background: var(--secondary);

}

/* =====================================
   CONTAINER
===================================== */

.container {

   width: 100%;

   max-width: var(--max-width);

   margin-inline: auto;

   padding-inline: 1.5rem;

}

@media (max-width:768px) {

   .container {
      padding-inline: 1rem;
   }

}



/* =====================================
   ScrollInUpdates
===================================== */

#featuresSection {
   position: relative;
   overflow: hidden;
}

.scroll-text {
   position: absolute;
   width: 100%;
   height: 50px;
   cursor: pointer;
   animation: scrollDown 5s linear infinite;
}

.group:hover .scroll-text {
   animation-play-state: paused;
}



@keyframes scrollDown {
   0% {
      transform: translateY(100%);
      opacity: 0;
   }

   10% {
      opacity: 1;
   }

   90% {
      opacity: 1;
   }

   100% {
      transform: translateY(-100%);
      opacity: 0;
   }
}

#featuresSection {
   overflow: hidden;
   position: relative;
}

.ticker {
   display: inline-block;
   white-space: nowrap;
   animation: tickerMove 15s linear infinite;
}

/* Pause on hover */
#featuresSection:hover .ticker {
   animation-play-state: paused;
}

@keyframes tickerMove {
   from {
      transform: translateX(100%);
   }

   to {
      transform: translateX(-100%);
   }
}


/* =====================================
   TYPOGRAPHY
===================================== */

.section-badge {

   display: inline-block;

   padding: .75rem 1.25rem;

   background: rgba(255, 255, 255, .15);

   backdrop-filter: blur(10px);

   border-radius: 999px;

   font-size: .9rem;

   font-weight: 600;

}

.section-title {

   font-size: clamp(2rem,
         5vw,
         4rem);

   font-weight: 800;

   line-height: 1.15;

   margin-top: 1rem;

}

.section-description {

   margin-top: 1.5rem;

   font-size: 1.1rem;

   max-width: 850px;

   line-height: 1.8;

}

.section-header {

   text-align: center;

   max-width: 900px;

   margin-inline: auto;

}

.text-gradient {

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

   -webkit-background-clip: text;

   -webkit-text-fill-color: transparent;

   background-clip: text;

}

@media (max-width:768px) {

   h1 {
      font-size: 2.75rem;
   }

   h2 {
      font-size: 2rem;
   }

   h3 {
      font-size: 1.3rem;
   }

}

/* =====================================
   HEADINGS
===================================== */

h1 {

   font-size: clamp(2.5rem,
         6vw,
         5rem);

   line-height: 1.1;

   font-weight: 800;

}

h2 {

   font-size: clamp(2rem,
         5vw,
         4rem);

   line-height: 1.2;

   font-weight: 800;

}

h3 {

   font-size: 1.5rem;

   font-weight: 700;

   line-height: 1.4;

}

h4 {

   font-size: 1.25rem;

   font-weight: 700;

}

p {

   color: var(--gray-600);

}

/* =====================================
   BUTTONS
===================================== */

.primary-btn {

   display: inline-flex;

   align-items: center;

   justify-content: center;

   padding: 1rem 2rem;

   background: var(--primary);

   color: white;

   font-weight: 700;

   border-radius: var(--radius-sm);

   transition: var(--transition);

   box-shadow: var(--shadow);

}

.primary-btn:hover {

   transform: translateY(-3px);

   background: var(--secondary);

}

.secondary-btn {

   display: inline-flex;

   align-items: center;

   justify-content: center;

   padding: 1rem 2rem;

   border: 2px solid var(--primary);

   color: var(--primary);

   font-weight: 700;

   border-radius: var(--radius-sm);

   transition: var(--transition);

}

.secondary-btn:hover {

   background: var(--primary);

   color: white;

}

.sun-btn {

   display: inline-flex;

   align-items: center;

   justify-content: center;

   padding: 1rem 2rem;

   background: var(--sun);

   color: var(--dark);

   font-weight: 700;

   border-radius: var(--radius-sm);

   transition: var(--transition);

}

.sun-btn:hover {

   transform: translateY(-3px);

}

/* =====================================
   SECTION SPACING
===================================== */

.section {

   padding-block: 6rem;

}

.section-lg {

   padding-block: 8rem;

}

.section-xl {

   padding-block: 10rem;

}

/* =====================================
   UTILITIES
===================================== */

.text-center {

   text-align: center;

}

.text-left {

   text-align: left;

}

.text-right {

   text-align: right;

}

.w-full {

   width: 100%;

}

.h-full {

   height: 100%;

}

.rounded {

   border-radius: var(--radius);

}

.rounded-lg {

   border-radius: var(--radius-lg);

}

.shadow {

   box-shadow: var(--shadow);

}

.shadow-lg {

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

}

.shadow-xl {

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

}

.bg-white {

   background: white;

}

.bg-light {

   background: var(--light);

}

.bg-dark {

   background: var(--dark);

}

.text-white {

   color: white;

}

.text-primary {

   color: var(--primary);
   font-size: 32px;

}

.text-secondary {

   color: var(--secondary);

}

.text-accent {

   color: var(--accent);

}

.text-sun {

   color: var(--sun);

}

.mt-2 {
   margin-top: .5rem;
}

.mt-4 {
   margin-top: 1rem;
}

.mt-6 {
   margin-top: 1.5rem;
}

.mt-8 {
   margin-top: 2rem;
}

.mt-10 {
   margin-top: 2.5rem;
}

.mt-12 {
   margin-top: 3rem;
}

.mt-16 {
   margin-top: 4rem;
}

.mt-20 {
   margin-top: 5rem;
}

.mb-2 {
   margin-bottom: .5rem;
}

.mb-4 {
   margin-bottom: 1rem;
}

.mb-6 {
   margin-bottom: 1.5rem;
}

.mb-8 {
   margin-bottom: 2rem;
}

.mb-10 {
   margin-bottom: 2.5rem;
}

.mb-12 {
   margin-bottom: 3rem;
}

.py-24 {

   padding-top: 6rem;
   padding-bottom: 6rem;

}

.py-32 {

   padding-top: 8rem;
   padding-bottom: 8rem;

}

/* =====================================
   IMAGE HELPERS
===================================== */

.img-cover {

   width: 100%;

   height: 100%;

   object-fit: cover;

}

.img-rounded {

   border-radius: var(--radius-lg);

}

/* =====================================
   PERFORMANCE HELPERS
===================================== */

.lazy-hidden {

   opacity: 0;

   transform: translateY(20px);

}

.lazy-show {

   opacity: 1;

   transform: translateY(0);

   transition:
      opacity .6s ease,
      transform .6s ease;

}

/* =====================================
   ACCESSIBILITY
===================================== */

:focus-visible {

   outline: 3px solid var(--primary);

   outline-offset: 3px;

   border-radius: 8px;

}

/* =======================================================
   YANTROMITRA WEBSITE
   STYLE.CSS PART 2

   Header
   Navigation
   Mobile Menu
   Footer
   Social Icons
   Sticky Header
   Breadcrumbs

======================================================= */

/* =====================================
   HEADER
===================================== */

.site-header,
header {

   position: fixed;

   top: 0;

   left: 0;

   width: 100%;

   z-index: 999;

   background:
      rgba(255, 255, 255, .95);

   backdrop-filter:
      blur(16px);

   -webkit-backdrop-filter:
      blur(16px);

   border-bottom:
      1px solid rgba(0, 0, 0, .05);

   transition:
      all .3s ease;

}

.header-scrolled {

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

   background:
      rgba(255, 255, 255, .98);

}



/* =====================================
   HEADER CONTAINER
===================================== */

.header-container {

   display: flex;

   align-items: center;

   justify-content: space-between;

   height: 80px;

}

/* =====================================
   LOGO
===================================== */

.logo {

   display: flex;

   align-items: center;

   gap: 1rem;

}

.logo img {

   height: 60px;

   width: auto;

}

.logo-text {

   display: flex;

   flex-direction: column;

}

.logo-title {

   font-size: 1.25rem;

   font-weight: 800;

   color: var(--primary);

   line-height: 1.1;

}

.logo-subtitle {

   font-size: .75rem;

   color: var(--gray-500);

}

/* =====================================
   NAVIGATION
===================================== */

.navbar {

   display: flex;

   align-items: center;

   gap: 2rem;

}

.nav-link {

   position: relative;

   font-weight: 600;

   color: var(--dark);

   transition: var(--transition);

}

.nav-link:hover {

   color: var(--primary);

}

.nav-link::after {

   content: "";

   position: absolute;

   left: 0;

   bottom: -8px;

   width: 0;

   height: 3px;

   background: var(--primary);

   border-radius: 999px;

   transition: var(--transition);

}

.nav-link:hover::after {

   width: 100%;

}

/* Active Link */

.nav-link.active {

   color: var(--primary);

}

.nav-link.active::after {

   width: 100%;

}

@media (max-width: 768px) {

   .header-container {
      height: 72px;
   }

   .logo img {
      height: 48px;
   }

   .mobile-menu-btn {
      width: 44px;
      height: 44px;
   }

}

/* =====================================
   CTA NAV BUTTON
===================================== */

.nav-cta {

   display: inline-flex;

   align-items: center;

   justify-content: center;

   padding: .9rem 1.5rem;

   background: var(--primary);

   color: white;

   font-weight: 700;

   border-radius: 12px;

   transition: var(--transition);

}

.nav-cta:hover {

   background: var(--secondary);

   transform: translateY(-2px);

}

@media (max-width: 768px) {

   .hero-buttons {
      width: 100%;
   }

   .primary-btn,
   .secondary-btn,
   .sun-btn {

      width: 100%;
      justify-content: center;
   }

}

/* =====================================
   DROPDOWN MENU
===================================== */

.dropdown {

   position: relative;

}

.dropdown-menu {

   position: absolute;

   top: 100%;

   left: 0;

   min-width: 250px;

   background: white;

   border-radius: 16px;

   padding: 1rem;

   box-shadow:
      0 20px 50px rgba(0, 0, 0, .1);

   opacity: 0;

   visibility: hidden;

   transform: translateY(15px);

   transition: .3s ease;

}

.dropdown:hover .dropdown-menu {

   opacity: 1;

   visibility: visible;

   transform: translateY(0);

}

.dropdown-menu a {

   display: block;

   padding: .75rem 1rem;

   border-radius: 10px;

   font-weight: 500;

   transition: .3s;

}

.dropdown-menu a:hover {

   background: var(--gray-100);

   color: var(--primary);

}

/* =====================================
   MOBILE MENU BUTTON
===================================== */

.mobile-menu-btn {

   display: none;

   width: 48px;

   height: 48px;

   border-radius: 12px;

   background: var(--gray-100);

   align-items: center;

   justify-content: center;

}

.mobile-menu-btn svg {

   width: 28px;

   height: 28px;

}

/* =====================================
   MOBILE MENU
===================================== */

.mobile-menu {

   display: none;

   position: absolute;

   top: 100%;

   left: 0;

   width: 100%;

   background: white;

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

   padding: 1.5rem;

}

.mobile-menu.active {

   display: block;

   animation:
      slideDown .3s ease;

}

.mobile-menu a {

   display: block;

   padding: 1rem;

   border-bottom:
      1px solid var(--gray-200);

   font-weight: 600;

}

.mobile-menu a:last-child {

   border-bottom: none;

}

/* =====================================
   ANNOUNCEMENT BAR
===================================== */

.announcement-bar {

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

   color: white;

   padding: .75rem;

   text-align: center;

   font-size: .9rem;

   font-weight: 600;

}

.announcement-bar a {

   text-decoration: underline;

}

/* =====================================
   BREADCRUMBS
===================================== */

.breadcrumb {

   display: flex;

   flex-wrap: wrap;

   gap: .75rem;

   align-items: center;

   font-size: .95rem;

   margin-bottom: 2rem;

}

.breadcrumb a {

   color: var(--primary);

   font-weight: 600;

}

.breadcrumb span {

   color: var(--gray-500);

}

/* =====================================
   FOOTER
===================================== */

footer {

   background: var(--dark);

   color: white;

}

.footer-top {

   padding-top: 6rem;

   padding-bottom: 4rem;

}

.footer-grid {

   display: grid;

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

   gap: 3rem;

}

.footer-logo {

   height: 70px;

   margin-bottom: 1.5rem;

}

.footer-description {

   color: rgba(255, 255, 255, .75);

   line-height: 1.8;

}

.footer-title {

   font-size: 1.25rem;

   font-weight: 700;

   margin-bottom: 1.5rem;

}

.footer-links {

   display: flex;

   flex-direction: column;

   gap: .8rem;

}

.footer-links a {

   color: rgba(255, 255, 255, .75);

   transition: .3s;

}

.footer-links a:hover {

   color: white;

   padding-left: 4px;

}

/* =====================================
   FOOTER CONTACT
===================================== */

.footer-contact {

   display: flex;

   flex-direction: column;

   gap: 1rem;

}

.footer-contact p {

   color: rgba(255, 255, 255, .75);

}

/* =====================================
   SOCIAL ICONS
===================================== */

.social-links {

   display: flex;

   gap: 1rem;

   margin-top: 1.5rem;

}

.social-link {

   width: 44px;

   height: 44px;

   border-radius: 50%;

   background:
      rgba(255, 255, 255, .1);

   display: flex;

   align-items: center;

   justify-content: center;

   transition: .3s;

}

.social-link:hover {

   background: var(--primary);

   transform: translateY(-4px);

}

.social-link svg {

   width: 20px;

   height: 20px;

}

/* =====================================
   FOOTER BOTTOM
===================================== */

.footer-bottom {

   border-top:
      1px solid rgba(255, 255, 255, .1);

   padding-top: 2rem;

   margin-top: 3rem;

   display: flex;

   justify-content: space-between;

   align-items: center;

   gap: 1rem;

   flex-wrap: wrap;

}

.footer-bottom p {

   color: rgba(255, 255, 255, .7);

}

.footer-bottom-links {

   display: flex;

   gap: 1.5rem;

}

.footer-bottom-links a {

   color: rgba(255, 255, 255, .7);

}

.footer-bottom-links a:hover {

   color: white;

}

/* =====================================
   STICKY HELPERS
===================================== */

.has-fixed-header {

   padding-top: 100px;

}

/* =====================================
   ANIMATIONS
===================================== */

@keyframes slideDown {

   from {

      opacity: 0;

      transform: translateY(-15px);

   }

   to {

      opacity: 1;

      transform: translateY(0);

   }

}

/* =====================================
   RESPONSIVE
===================================== */





/* =======================================================
   YANTROMITRA WEBSITE
   STYLE.CSS PART 3

   Hero Sections
   Glass Cards
   Feature Cards
   Counters
   Testimonials
   CTA Sections
   Image Effects
   WhatsApp Button
   Animations

======================================================= */

/* =====================================
   HERO SECTIONS
===================================== */

.hero-section {

   position: relative;

   min-height: 100vh;

   display: flex;

   align-items: center;

   overflow: hidden;

}

.hero-content {

   position: relative;

   z-index: 2;

   max-width: 750px;


}

.hero-subtitle {

   display: inline-block;

   padding: .8rem 1.25rem;

   background:
      rgba(255, 255, 255, .15);

   backdrop-filter: blur(12px);

   border-radius: 999px;

   font-weight: 600;

   margin-bottom: 1.5rem;

}

@media (max-width: 768px) {

   .hero-title {
      font-size: 2.8rem;
      line-height: 1.05;
      max-width: 100%;
   }

}

@media (max-width: 768px) {

   .hero-description {
      font-size: 1rem;
      line-height: 1.8;
      max-width: 100%;
   }

}

.hero-buttons {

   display: flex;

   gap: 1rem;

   flex-wrap: wrap;

   margin-top: 2.5rem;

}

@media (max-width: 768px) {

   .hero-section {
      min-height: auto;
      padding: 120px 0 60px;
   }

   .hero-card,
   .hero-content {
      padding: 2rem;
   }

}

/* =====================================
   HERO BACKGROUND SHAPES
===================================== */

.hero-shape {

   position: absolute;

   border-radius: 50%;

   filter: blur(80px);

   opacity: .25;

   pointer-events: none;

}

.hero-shape-1 {

   width: 350px;

   height: 350px;

   background: var(--primary);

   top: -100px;

   right: -100px;

}

.hero-shape-2 {

   width: 250px;

   height: 250px;

   background: var(--sun);

   bottom: -50px;

   left: -50px;

}

/* =====================================
   GLASSMORPHISM CARDS
===================================== */

.glass-card {

   background:
      rgba(255, 255, 255, .75);

   backdrop-filter: blur(14px);

   -webkit-backdrop-filter: blur(14px);

   border:
      1px solid rgba(255, 255, 255, .35);

   border-radius: 24px;

   padding: 2rem;

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

   transition: all .3s ease;

}

.glass-card:hover {

   transform: translateY(-8px);

   box-shadow:
      0 20px 50px rgba(0, 0, 0, .12);

}

@media (max-width: 768px) {

   .glass-card,
   .hero-card {

      padding: 1.75rem;

      border-radius: 32px;
   }

}

/* =====================================
   Our Team Marquee
===================================== */
.team-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
}

.team-track {
    display: flex;
    gap: 30px;
    width: max-content;
    animation: scrollTeam 35s linear infinite;
}

.team-track:hover {
    animation-play-state: paused;
}

.team-card {
    width: 350px;
    min-width: 350px;
    padding: 30px;
    background: rgba(255,255,255,0.85);
    border-radius: 24px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

@keyframes scrollTeam {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-50%));
    }
}

/* Mobile */
@media (max-width: 768px) {

    .team-card {
        width: 280px;
        min-width: 280px;
    }

    .team-track {
        animation-duration: 25s;
    }
}
/* =====================================
   FEATURE CARDS
===================================== */

.feature-card {

   background: white;

   border-radius: 24px;

   padding: 2rem;

   box-shadow: var(--shadow);

   transition: all .3s ease;

   height: 100%;

}

.feature-card:hover {

   transform: translateY(-10px);

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

}

.feature-icon {

   width: 80px;

   height: 80px;

   display: flex;

   align-items: center;

   justify-content: center;

   border-radius: 20px;

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

   color: white;

   font-size: 2rem;

   margin-bottom: 1.5rem;

}

.feature-title {

   font-size: 1.5rem;

   font-weight: 700;

   margin-bottom: 1rem;

}



/* =====================================
   TESTIMONIALS
===================================== */

.testimonial-card {

   background: white;

   border-radius: 30px;

   padding: 2.5rem;

   box-shadow: var(--shadow);

   position: relative;

   height: 100%;

}

.testimonial-card::before {

   content: "❝";

   position: absolute;

   top: 20px;

   right: 25px;

   font-size: 5rem;

   opacity: .1;

   line-height: 1;

}

.testimonial-text {

   font-size: 1.05rem;

   line-height: 1.9;

   margin-bottom: 2rem;

}

.testimonial-author {

   display: flex;

   align-items: center;

   gap: 1rem;

}

.testimonial-avatar {

   width: 70px;

   height: 70px;

   border-radius: 50%;

   overflow: hidden;

}

.testimonial-name {

   font-weight: 700;

}

.testimonial-role {

   font-size: .9rem;

   color: var(--gray-500);

}

/* =====================================
   IMAGE HOVER EFFECTS
===================================== */

.image-hover {

   overflow: hidden;

   border-radius: 24px;

}

.image-hover img {

   transition:
      transform .6s ease,
      filter .4s ease;

}

.image-hover:hover img {

   transform: scale(1.08);

   filter: brightness(1.05);

}

/* =====================================
   GALLERY IMAGE EFFECT
===================================== */

.gallery-item {

   overflow: hidden;

   border-radius: 24px;

   cursor: pointer;

}

.gallery-item img {

   width: 100%;

   transition:
      transform .6s ease;

}

.gallery-item:hover img {

   transform: scale(1.06);

}



/* =====================================
   FLOATING WHATSAPP
===================================== */
/* 
.whatsapp-float {

   position: fixed;

   bottom: 25px;

   right: 25px;

   width: 70px;

   height: 70px;

   z-index: 999;

   transition: .3s ease;

}

.whatsapp-float:hover {

   transform: scale(1.12);

}

.whatsapp-float img {

   width: 100%;

   height: 100%;

   object-fit: contain;

}

/* =====================================
   FLOATING ACTION BUTTON
===================================== */

.fab {

   position: fixed;

   bottom: 110px;

   right: 25px;

   width: 60px;

   height: 60px;

   border-radius: 50%;

   display: flex;

   align-items: center;

   justify-content: center;

   background: var(--primary);

   color: white;

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

   z-index: 999;

} */

/* =====================================
   ANIMATIONS
===================================== */

.fade-up {

   opacity: 0;

   transform: translateY(30px);

   transition:
      opacity .7s ease,
      transform .7s ease;

}

.fade-up.show {

   opacity: 1;

   transform: translateY(0);

}

.fade-in {

   opacity: 0;

   transition:
      opacity .8s ease;

}

.fade-in.show {

   opacity: 1;

}

.zoom-in {

   opacity: 0;

   transform: scale(.9);

   transition:
      all .6s ease;

}

.zoom-in.show {

   opacity: 1;

   transform: scale(1);

}

/* =====================================
   PULSE EFFECT
===================================== */

.pulse {

   animation:
      pulse 2s infinite;

}

@keyframes pulse {

   0% {

      box-shadow:
         0 0 0 0 rgba(109, 75, 195, .5);

   }

   70% {

      box-shadow:
         0 0 0 18px rgba(109, 75, 195, 0);

   }

   100% {

      box-shadow:
         0 0 0 0 rgba(109, 75, 195, 0);

   }

}

/* =====================================
   FLOAT EFFECT
===================================== */

.float {

   animation:
      floating 4s ease-in-out infinite;

}

@keyframes floating {

   0% {

      transform: translateY(0);

   }

   50% {

      transform: translateY(-10px);

   }

   100% {

      transform: translateY(0);

   }

}

/* =====================================
   SECTION DIVIDERS
===================================== */

.wave-divider {

   position: absolute;

   bottom: 0;

   left: 0;

   width: 100%;

   line-height: 0;

}

.wave-divider svg {

   width: 100%;

   height: auto;

   display: block;

}

/* =====================================
   RESPONSIVE
===================================== */



/* =======================================================
   YANTROMITRA WEBSITE
   STYLE.CSS PART 4

   Forms
   Tables
   Gallery Filters
   Lightbox
   Blog
   Careers
   FAQ
   Video Embeds
   Maps
   Alerts

======================================================= */

/* =====================================
   FORMS
===================================== */

.form-container {

   background: white;

   padding: 2.5rem;

   border-radius: 30px;

   box-shadow: var(--shadow);

}

.form-group {

   margin-bottom: 1.5rem;

}

.form-label {

   display: block;

   font-weight: 600;

   margin-bottom: .5rem;

   color: var(--dark);

}

.form-input,
.form-select,
.form-textarea {

   width: 100%;

   padding: 1rem 1.2rem;

   border: 2px solid var(--gray-200);

   border-radius: 14px;

   background: white;

   transition: .3s ease;

   font-size: 1rem;

}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {

   border-color: var(--primary);

   box-shadow:
      0 0 0 4px rgba(109, 75, 195, .12);

}

.form-textarea {

   resize: vertical;

   min-height: 150px;

}

.form-row {

   display: grid;

   grid-template-columns:
      repeat(2, 1fr);

   gap: 1.5rem;

}

.checkbox-grid {

   display: grid;

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

   gap: 1rem;

   margin-top: 1rem;

}

.checkbox-item {

   display: flex;

   align-items: center;

   gap: .75rem;

   padding: .75rem;

   border-radius: 12px;

   background: var(--gray-50);

}

/* =====================================
   SUCCESS / ERROR MESSAGES
===================================== */

.alert {

   padding: 1rem 1.25rem;

   border-radius: 12px;

   margin-top: 1rem;

   font-weight: 600;

}

.alert-success {

   background: #dcfce7;

   color: #166534;

   border: 1px solid #86efac;

}

.alert-error {

   background: #fee2e2;

   color: #991b1b;

   border: 1px solid #fca5a5;

}

.alert-warning {

   background: #fef3c7;

   color: #92400e;

   border: 1px solid #fcd34d;

}

/* =====================================
   TABLES
===================================== */

.table-wrapper {

   overflow-x: auto;

   border-radius: 24px;

   box-shadow: var(--shadow);

}

.custom-table {

   width: 100%;

   border-collapse: collapse;

   background: white;

}

.custom-table thead {

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

   color: white;

}

.custom-table th {

   padding: 1.2rem;

   text-align: left;

   font-weight: 700;

}

.custom-table td {

   padding: 1rem 1.2rem;

   border-bottom:
      1px solid var(--gray-200);

}

.custom-table tbody tr:hover {

   background: var(--gray-50);

}

/* =====================================
   GALLERY FILTERS
===================================== */

.gallery-filters {

   display: flex;

   flex-wrap: wrap;

   justify-content: center;

   gap: 1rem;

   margin-bottom: 3rem;

}

.gallery-filter {

   padding: .85rem 1.5rem;

   border-radius: 999px;

   background: white;

   font-weight: 600;

   cursor: pointer;

   transition: .3s ease;

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

}

.gallery-filter:hover {

   transform: translateY(-3px);

}

.gallery-filter.active-filter {

   background: var(--primary);

   color: white;

}

/* =====================================
   GALLERY GRID
===================================== */

.gallery-grid {

   display: grid;

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

   gap: 1.5rem;

}

/* =====================================
   LIGHTBOX
===================================== */

#lightbox {

   position: fixed;

   inset: 0;

   background:
      rgba(0, 0, 0, .92);

   z-index: 9999;

   display: flex;

   align-items: center;

   justify-content: center;

   padding: 2rem;

}

#lightbox.hidden {

   display: none;

}

#lightbox-image {

   max-width: 95%;

   max-height: 90vh;

   border-radius: 20px;

   box-shadow:
      0 20px 60px rgba(0, 0, 0, .4);

}

#lightbox-close {

   position: absolute;

   top: 25px;

   right: 30px;

   font-size: 3rem;

   color: white;

   background: none;

   cursor: pointer;

}

/* =====================================
   BLOG CARDS
===================================== */

.blog-card {

   background: white;

   border-radius: 28px;

   overflow: hidden;

   box-shadow: var(--shadow);

   transition: .35s ease;

   height: 100%;

}

.blog-card:hover {

   transform: translateY(-8px);

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

}

.blog-card img {

   width: 100%;

   height: 240px;

   object-fit: cover;

}

.blog-content {

   padding: 1.75rem;

}

.blog-tag {

   display: inline-block;

   padding: .4rem .9rem;

   background:
      rgba(109, 75, 195, .1);

   color: var(--primary);

   font-size: .85rem;

   font-weight: 600;

   border-radius: 999px;

   margin-bottom: 1rem;

}

.blog-content h3 {

   margin-bottom: 1rem;

}

.blog-content p {

   margin-bottom: 1rem;

}

.blog-content a {

   color: var(--primary);

   font-weight: 700;

}

/* =====================================
   FEATURED ARTICLE
===================================== */

.article-category {

   display: inline-block;

   padding: .5rem 1rem;

   background:
      rgba(109, 75, 195, .1);

   color: var(--primary);

   font-weight: 600;

   border-radius: 999px;

}

/* =====================================
   CAREERS
===================================== */

.job-card {

   display: flex;

   justify-content: space-between;

   align-items: center;

   gap: 2rem;

   padding: 2rem;

   background: white;

   border-radius: 24px;

   box-shadow: var(--shadow);

   transition: .3s ease;

}

.job-card:hover {

   transform: translateY(-5px);

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

}

.job-card h3 {

   margin-bottom: .5rem;

}

.job-card p {

   color: var(--gray-500);

}

/* =====================================
   FAQ
===================================== */

details {

   background: white;

   border-radius: 20px;

   padding: 1.5rem;

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

   transition: .3s ease;

}

details[open] {

   box-shadow: var(--shadow);

}

details summary {

   list-style: none;

   cursor: pointer;

   font-weight: 700;

   font-size: 1.1rem;

   position: relative;

   padding-right: 2rem;

}

details summary::-webkit-details-marker {

   display: none;

}

details summary::after {

   content: "+";

   position: absolute;

   right: 0;

   top: 0;

   font-size: 1.5rem;

   font-weight: 700;

   transition: .3s ease;

}

details[open] summary::after {

   transform: rotate(45deg);

}

details p {

   margin-top: 1rem;

}

/* =====================================
   VIDEO EMBEDS
===================================== */

.video-card {

   background: white;

   padding: 1rem;

   border-radius: 24px;

   box-shadow: var(--shadow);

}

.aspect-video {

   aspect-ratio: 16 / 9;

   overflow: hidden;

   border-radius: 18px;

}

.aspect-video iframe {

   width: 100%;

   height: 100%;

   border: none;

}

/* =====================================
   GOOGLE MAPS
===================================== */

.map-container {

   overflow: hidden;

   border-radius: 30px;

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

}

.map-container iframe {

   width: 100%;

   height: 500px;

   border: none;

   display: block;

}

/* =====================================
   NEWSLETTER
===================================== */

.newsletter-form {

   display: flex;

   gap: 1rem;

   max-width: 700px;

   margin-inline: auto;

   margin-top: 2rem;

}

.newsletter-form input {

   flex: 1;

   padding: 1rem 1.2rem;

   border: none;

   border-radius: 14px;

}

/* =====================================
   TIMELINE
===================================== */

.timeline {

   position: relative;

   padding-left: 2rem;

}

.timeline::before {

   content: "";

   position: absolute;

   left: 10px;

   top: 0;

   bottom: 0;

   width: 3px;

   background: var(--primary);

}

.timeline-item {

   position: relative;

   padding-bottom: 2rem;

}

.timeline-item::before {

   content: "";

   position: absolute;

   left: -1.75rem;

   top: .3rem;

   width: 18px;

   height: 18px;

   border-radius: 50%;

   background: var(--primary);

}

/* =====================================
   CONTACT CARDS
===================================== */

.contact-card {

   padding: 2rem;

   background: white;

   border-radius: 24px;

   text-align: center;

   box-shadow: var(--shadow);

   transition: .3s ease;

}

.contact-card:hover {

   transform: translateY(-6px);

}

/* =====================================
   RESPONSIVE
===================================== */



/* =======================================================
   YANTROMITRA WEBSITE
   STYLE.CSS PART 5

   Mobile Optimization
   Hero Slider
   Testimonials Carousel
   Counters
   Skeleton Loading
   Accessibility
   Print Styles
   Dark Mode Preparation
   Lighthouse Optimization

======================================================= */

/* =====================================
   HERO SLIDER
===================================== */

.hero-slider {

   position: relative;

   overflow: hidden;

}

.hero-slide {

   position: absolute;

   inset: 0;

   opacity: 0;

   visibility: hidden;

   transition:
      opacity .8s ease;

}

.hero-slide.active {

   opacity: 1;

   visibility: visible;

   position: relative;

}

.hero-slide img {

   width: 100%;

   height: 100%;

   object-fit: cover;

}

.slider-controls {

   position: absolute;

   bottom: 30px;

   left: 50%;

   transform: translateX(-50%);

   display: flex;

   gap: .75rem;

   z-index: 20;

}

.slider-dot {

   width: 14px;

   height: 14px;

   border-radius: 50%;

   background:
      rgba(255, 255, 255, .5);

   cursor: pointer;

   transition: .3s;

}

.slider-dot.active {

   background: white;

   transform: scale(1.2);

}

.slider-arrow {

   position: absolute;

   top: 50%;

   transform: translateY(-50%);

   width: 55px;

   height: 55px;

   border-radius: 50%;

   background:
      rgba(255, 255, 255, .15);

   backdrop-filter: blur(10px);

   display: flex;

   align-items: center;

   justify-content: center;

   cursor: pointer;

   z-index: 20;

}

.slider-prev {

   left: 20px;

}

.slider-next {

   right: 20px;

}

/* =====================================
   TESTIMONIAL CAROUSEL
===================================== */

.testimonial-carousel {

   position: relative;

   overflow: hidden;

}

.testimonial-track {

   display: flex;

   transition:
      transform .6s ease;

}

.testimonial-slide {

   min-width: 100%;

   padding: 1rem;

}

.carousel-controls {

   display: flex;

   justify-content: center;

   gap: 1rem;

   margin-top: 2rem;

}

.carousel-btn {

   width: 50px;

   height: 50px;

   border-radius: 50%;

   background: white;

   box-shadow: var(--shadow);

   display: flex;

   align-items: center;

   justify-content: center;

   cursor: pointer;

}

/* =====================================
   COUNTER ANIMATION
===================================== */

.counter {

   display: inline-block;

   font-weight: 800;

   line-height: 1;

}

.counter-suffix {

   font-size: .75em;

   margin-left: 2px;

}

/* =====================================
   LOADING SKELETONS
===================================== */

.skeleton {

   position: relative;

   overflow: hidden;

   background:
      var(--gray-200);

   border-radius: 12px;

}

.skeleton::after {

   content: "";

   position: absolute;

   top: 0;

   left: -150%;

   width: 100%;

   height: 100%;

   background:
      linear-gradient(90deg,
         transparent,
         rgba(255, 255, 255, .5),
         transparent);

   animation:
      skeleton-loading 1.5s infinite;

}

@keyframes skeleton-loading {

   100% {

      left: 150%;

   }

}

/* =====================================
   IMAGE PLACEHOLDER
===================================== */

.image-placeholder {

   background:
      linear-gradient(135deg,
         var(--gray-100),
         var(--gray-200));

   display: flex;

   align-items: center;

   justify-content: center;

   min-height: 250px;

   border-radius: 24px;

}

/* =====================================
   ACCESSIBILITY
===================================== */

.skip-link {

   position: absolute;

   top: -100px;

   left: 20px;

   background: white;

   padding: 1rem;

   z-index: 99999;

   box-shadow: var(--shadow);

}

.skip-link:focus {

   top: 20px;

}

[aria-hidden="true"] {

   pointer-events: none;

}

.visually-hidden {

   position: absolute;

   width: 1px;

   height: 1px;

   overflow: hidden;

   clip: rect(0, 0, 0, 0);

   white-space: nowrap;

}

/* =====================================
   FOCUS IMPROVEMENTS
===================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {

   outline: 3px solid var(--primary);

   outline-offset: 3px;

}

/* =====================================
   PERFORMANCE HELPERS
===================================== */

.content-visibility {

   content-visibility: auto;

   contain-intrinsic-size:
      1000px;

}

.hardware-accelerated {

   transform: translateZ(0);

   will-change: transform;

}

/* =====================================
   LAZY LOADING HELPERS
===================================== */

.lazy-image {

   opacity: 0;

   transition:
      opacity .5s ease;

}

.lazy-image.loaded {

   opacity: 1;

}

/* =====================================
   RESPONSIVE EMBEDS
===================================== */

.embed-container {

   position: relative;

   padding-bottom: 56.25%;

   height: 0;

   overflow: hidden;

   border-radius: 20px;

}

.embed-container iframe {

   position: absolute;

   top: 0;

   left: 0;

   width: 100%;

   height: 100%;

   border: none;

}

/* =====================================
   BADGES
===================================== */

.badge {

   display: inline-flex;

   align-items: center;

   padding: .45rem .9rem;

   border-radius: 999px;

   font-size: .85rem;

   font-weight: 600;

}

.badge-primary {

   background:
      rgba(109, 75, 195, .1);

   color: var(--primary);

}

.badge-sun {

   background:
      rgba(248, 198, 0, .15);

   color: #8a6a00;

}

.badge-success {

   background:
      rgba(34, 197, 94, .1);

   color: #15803d;

}

/* =====================================
   DIVIDERS
===================================== */

.divider {

   height: 1px;

   background: var(--gray-200);

   margin: 3rem 0;

}

/* =====================================
   GRID HELPERS
===================================== */

.auto-grid {

   display: grid;

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

   gap: 2rem;

}

.two-col {

   display: grid;

   grid-template-columns:
      1fr 1fr;

   gap: 3rem;

}

.three-col {

   display: grid;

   grid-template-columns:
      repeat(3, 1fr);

   gap: 2rem;

}

.four-col {

   display: grid;

   grid-template-columns:
      repeat(4, 1fr);

   gap: 2rem;

}

/* =====================================
   MOBILE OPTIMIZATION
===================================== */

/* Desktop Navigation */
.navbar {
   display: flex;
}

/* Hide hamburger by default */
.mobile-menu-btn {
   display: none;
}

/* When screen is small enough to show hamburger */
@media (max-width: 1024px) {

   .navbar,
   nav {
      display: none;
   }

   .mobile-menu-btn {
      display: flex;
   }
}


/* =====================================
   PRINT STYLES
===================================== */

@media print {

   header,
   footer,
   .whatsapp-float,
   .mobile-menu,
   .slider-controls,
   .slider-arrow {

      display: none !important;

   }

   body {

      background: white;

      color: black;

   }

   a {

      text-decoration: none;

      color: black;

   }

}

/* =====================================
   DARK MODE PREPARATION
===================================== */

[data-theme="dark"] {

   --light: #111827;
   --dark: #F9FAFB;

   background: #111827;
   color: #F9FAFB;

}

/* =====================================
   REDUCED MOTION
===================================== */

@media (prefers-reduced-motion:reduce) {

   * {

      animation: none !important;

      transition: none !important;

      scroll-behavior: auto !important;

   }

}

/* =====================================
   LIGHTHOUSE HELPERS
===================================== */

.optimize-render {

   contain: layout paint style;

}

.no-select {

   user-select: none;

}

.pointer {

   cursor: pointer;

}

.hidden {

   display: none !important;

}

.flex-center {

   display: flex;

   align-items: center;

   justify-content: center;

}

.logo-carousel {

   overflow: hidden;

   position: relative;

}

.logo-track {

   display: flex;

   gap: 4rem;

   width: max-content;

   animation:
      logoScroll 25s linear infinite;

}

.logo-track img {

   height: 80px;

   width: auto;

   object-fit: contain;

}

@keyframes logoScroll {

   from {

      transform:
         translateX(0);

   }

   to {

      transform:
         translateX(-50%);

   }

}

.timeline-item {

   opacity: 0;

   transform:
      translateY(40px);

   transition:
      all .7s ease;

}

.timeline-item.show {

   opacity: 1;

   transform:
      translateY(0);

}

#chatWidget {

   position: fixed;

   bottom: 110px;

   right: 25px;

   z-index: 9999;

}

#chatToggle {

   width: 65px;

   height: 65px;

   border-radius: 50%;

   background: var(--primary);

   color: white;

   font-size: 24px;

   cursor: pointer;

}

#chatBox {

   width: 340px;

   height: 500px;

   background: white;

   border-radius: 24px;

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

   overflow: hidden;

   display: flex;

   flex-direction: column;

}

.chat-header {

   padding: 1rem;

   background: var(--primary);

   color: white;

   font-weight: 700;

}

#chatMessages {

   flex: 1;

   overflow-y: auto;

   padding: 1rem;

}

.user-message {

   background: var(--primary);

   color: white;

   padding: .75rem;

   border-radius: 12px;

   margin-bottom: 1rem;

   margin-left: 20%;

}

.bot-message {

   background: var(--gray-100);

   padding: .75rem;

   border-radius: 12px;

   margin-bottom: 1rem;

   margin-right: 20%;

}

.chat-input-area {

   display: flex;

   border-top: 1px solid var(--gray-200);

}

.chat-input-area input {

   flex: 1;

   border: none;

   padding: 1rem;

}

.chat-input-area button {

   padding: 1rem;

   background: var(--primary);

   color: white;

}


/* ===================================================== */
/* GALLERY MARQUEE */
/* ===================================================== */

.gallery-marquee {

   overflow: hidden;

   position: relative;

   width: 100%;
}

.gallery-track {

   display: flex;

   gap: 20px;

   width: max-content;

   animation: scrollLeftToRight 35s linear infinite;
}

.card-track {

   display: flex;

   gap: 20px;

   width: max-content;

   animation: scrollRightToLeft 15s linear infinite;
}

.gallery-track img {

   width: 420px;

   height: 320px;

   object-fit: cover;

   border-radius: 24px;

   box-shadow:
      0 10px 25px rgba(0, 0, 0, .08);

   transition:
      transform .4s ease,
      box-shadow .4s ease;
}

.gallery-track img:hover {

   transform: scale(1.05);

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

   animation-play-state: paused;

}

.gallery-track:hover {

   animation-play-state: paused;

}

.card-track:hover {

   animation-play-state: paused;

}

@keyframes scrollLeftToRight {

   0% {
      transform: translateX(0);
   }

   100% {
      transform: translateX(-50%);
   }
}

@keyframes scrollRightToLeft {

   0% {
      transform: translateX(-50%);
   }

   100% {
      transform: translateX(0);
   }
}



/* =====================================
   END OF STYLE.CSS
===================================== */