img,
video {
  max-width: 100%;
  height: auto;
}


.hero_section{
    padding-top: 50px;
}
.btn-primary{
  border-radius: 0.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 600;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.btn-primary:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 2px;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-cta);
}

.btn-primary:hover {
  background-color: var(--color-primary-600);
}

.btn-primary:focus {
  --tw-ring-color: var(--color-primary);
}

.btn-secondary{
  border-radius: 0.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-weight: 600;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.btn-secondary:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width: 2px;
}

.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-cta);
}

.btn-secondary:hover {
  background-color: var(--color-secondary-600);
}

.btn-secondary:focus {
  --tw-ring-color: var(--color-secondary);
}
.card{
  border-radius: 0.5rem;
  /* font-size: 18px; */
  border-width: 1px;
  padding: 1rem 1rem;
  background-color: var(--color-surface-100);
  border-color: var(--color-surface-200);
  box-shadow: var(--shadow-card);
}
.section-padding{
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.text-gradient {
  background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@keyframes spin{
  to{
    transform: rotate(360deg);
  }
}
.animate-spin{
  animation: spin 1s linear infinite;
}
.bg-accent-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}
.bg-secondary-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}
.bg-primary-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(217 226 236 / var(--tw-bg-opacity, 1));
}
.text-body-lg{
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 400;
}
.text-subheading{
  font-size: 1.5rem;
  line-height: 1.4;
  font-weight: 600;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.to-secondary {
    --tw-gradient-to: #4A90A4 var(--tw-gradient-to-position);
}
.from-primary {
    --tw-gradient-from: #1B365D var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(27 54 93 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-secondary {
    --tw-gradient-to: #4A90A4 var(--tw-gradient-to-position);
}
.text-accent{
  --tw-text-opacity: 1;
  color: rgb(255 107 53 / var(--tw-text-opacity, 1));
}

.text-error-500{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-primary{
  --tw-text-opacity: 1;
  color: rgb(27 54 93 / var(--tw-text-opacity, 1));
}

.text-primary-200{
  --tw-text-opacity: 1;
  color: rgb(188 204 220 / var(--tw-text-opacity, 1));
}

.text-primary-300{
  --tw-text-opacity: 1;
  color: rgb(159 179 200 / var(--tw-text-opacity, 1));
}

.text-secondary{
  --tw-text-opacity: 1;
  color: rgb(74 144 164 / var(--tw-text-opacity, 1));
}

.text-success{
  --tw-text-opacity: 1;
  color: rgb(56 161 105 / var(--tw-text-opacity, 1));
}

.text-success-600{
  --tw-text-opacity: 1;
  color: rgb(56 161 105 / var(--tw-text-opacity, 1));
}

.text-text-light{
  --tw-text-opacity: 1;
  color: rgb(160 174 192 / var(--tw-text-opacity, 1));
}

.text-text-muted{
  --tw-text-opacity: 1;
  color: rgb(113 128 150 / var(--tw-text-opacity, 1));
}

.text-text-primary{
  --tw-text-opacity: 1;
  color: rgb(45 55 72 / var(--tw-text-opacity, 1));
}

.text-text-secondary{
  --tw-text-opacity: 1;
  color: rgb(74 85 104 / var(--tw-text-opacity, 1));
}
.bg-background {
  background-color: #040A17 !important;
}
.text-primary {
  color: var(--primary);
}
.bg-primary {
  background-color: var(--primary);
}
.bg-surface {
  background-color: var(--color-surface);
}
.bg-surface-100 {
  background-color: var(--color-surface-100);
}
.text-text-primary {
  color: var(--color-text-primary);
}
.text-text-secondary {
  color: var(--color-text-secondary);
}
:root {
  /* Updated color scheme based on user requirements */
  --background: #040A17;
  --foreground: hsl(210, 40%, 98%);
  --primary: #2C7AFF;
  --primary-foreground: #fff;
  --muted-foreground: hsl(215, 20%, 65%);
  /* Primary Colors - Updated to match the blue theme */
  --color-primary: #2C7AFF;
  /* primary blue */
  --color-primary-50: hsl(217, 91%, 95%);
  /* very light blue */
  --color-primary-100: hsl(217, 91%, 90%);
  /* light blue */
  --color-primary-200: hsl(217, 91%, 85%);
  /* lighter blue */
  --color-primary-300: hsl(217, 91%, 75%);
  /* medium light blue */
  --color-primary-400: hsl(217, 91%, 70%);
  /* medium blue */
  --color-primary-500: hsl(217, 91%, 60%);
  /* base primary blue */
  --color-primary-600: hsl(217, 91%, 50%);
  /* darker blue */
  --color-primary-700: hsl(217, 91%, 45%);
  /* dark blue */
  --color-primary-800: hsl(217, 91%, 35%);
  /* darker blue */
  --color-primary-900: hsl(217, 91%, 25%);
  /* darkest blue */
  /* Secondary Colors - Complementary to primary */
  --color-secondary: hsl(200, 80%, 55%);
  /* complementary blue */
  --color-secondary-50: hsl(200, 80%, 95%);
  /* very light secondary */
  --color-secondary-100: hsl(200, 80%, 90%);
  /* light secondary */
  --color-secondary-200: hsl(200, 80%, 85%);
  /* lighter secondary */
  --color-secondary-300: hsl(200, 80%, 75%);
  /* medium light secondary */
  --color-secondary-400: hsl(200, 80%, 65%);
  /* medium secondary */
  --color-secondary-500: hsl(200, 80%, 55%);
  /* base secondary */
  --color-secondary-600: hsl(200, 80%, 45%);
  /* darker secondary */
  --color-secondary-700: hsl(200, 80%, 40%);
  /* dark secondary */
  --color-secondary-800: hsl(200, 80%, 30%);
  /* darker secondary */
  --color-secondary-900: hsl(200, 80%, 20%);
  /* darkest secondary */
  /* Accent Colors - Bright accent for CTAs */
  --color-accent: hsl(45, 100%, 60%);
  /* bright yellow/orange accent */
  --color-accent-50: hsl(45, 100%, 95%);
  /* very light accent */
  --color-accent-100: hsl(45, 100%, 90%);
  /* light accent */
  --color-accent-200: hsl(45, 100%, 85%);
  /* lighter accent */
  --color-accent-300: hsl(45, 100%, 75%);
  /* medium light accent */
  --color-accent-400: hsl(45, 100%, 70%);
  /* medium accent */
  --color-accent-500: hsl(45, 100%, 60%);
  /* base accent */
  --color-accent-600: hsl(45, 100%, 50%);
  /* darker accent */
  --color-accent-700: hsl(45, 100%, 45%);
  /* dark accent */
  --color-accent-800: hsl(45, 100%, 35%);
  /* darker accent */
  --color-accent-900: hsl(45, 100%, 25%);
  /* darkest accent */
  /* Background Colors - Dark theme */
  --color-background: #040A17;
  /* main background */
  --color-surface: hsl(220, 25%, 12%);
  /* slightly lighter surface */
  --color-surface-100: hsl(220, 25%, 15%);
  /* card surfaces */
  --color-surface-200: hsl(220, 25%, 20%);
  /* elevated surfaces */
  /* Text Colors - Light text for dark background */
  --color-text-primary: hsl(210, 40%, 98%);
  /* main text color (foreground) */
  --color-text-secondary: #F5F8F9;
  /* secondary text */
  --color-text-muted: hsl(215, 20%, 65%);
  /* muted text (muted-foreground) */
  --color-text-light: hsl(215, 20%, 50%);
  /* light text */
  /* Status Colors - Adjusted for dark theme */
  --color-success: hsl(120, 60%, 55%);
  /* green success */
  --color-success-50: hsl(120, 60%, 95%);
  /* light success background */
  --color-success-100: hsl(120, 60%, 90%);
  /* success background */
  --color-success-500: hsl(120, 60%, 55%);
  /* success color */
  --color-warning: hsl(45, 90%, 60%);
  /* yellow warning */
  --color-warning-50: hsl(45, 90%, 95%);
  /* light warning background */
  --color-warning-100: hsl(45, 90%, 90%);
  /* warning background */
  --color-warning-500: hsl(45, 90%, 60%);
  /* warning color */
  --color-error: hsl(0, 70%, 60%);
  /* red error */
  --color-error-50: hsl(0, 70%, 95%);
  /* light error background */
  --color-error-100: hsl(0, 70%, 90%);
  /* error background */
  --color-error-500: hsl(0, 70%, 60%);
  /* error color */
  /* Shadows - Adjusted for dark theme */
  --shadow-cta: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
  /* Transitions */
  --transition-fast: 250ms ease-in-out;
  --transition-normal: 300ms ease-in-out;

}
.text-primary {
  color: var(--primary);
}
.text-primary {
  color: var(--primary);
}
.hover\:text-primary:hover {
    color: var(--primary);
}
.hover\:bg-white:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.contact-us-sec .main-title{
  font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 300;
        letter-spacing: 0;
}

.testi-slider-common .card {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 100%;
  height: auto;
}

@media (min-width: 768px){
  .md\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .md\:mt-0{
    margin-top: 0px;
  }

  .md\:flex{
    display: flex;
  }

  .md\:hidden{
    display: none;
  }

  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:flex-row{
    flex-direction: row;
  }
  .contact-us-sec .main-title{
    /* font-size: 36px; */
  }
}
@media (min-width: 1024px){
  .lg\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-6{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:justify-start{
    justify-content: flex-start;
  }

  .lg\:text-left{
    text-align: left;
  }
   .lg\:py-32{
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
   .lg\:py-20{
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
   .lg\:text-left{
    text-align: left;
  }

  .lg\:text-5xl{
    font-size: 3rem;
    line-height: 1;
  }

  .lg\:text-6xl{
    font-size: 3.75rem;
    line-height: 1;
  }
  
}

.testi-slider-common .slick-list.draggable{
  display: flex !important;
  flex-direction: column !important;
}
.testi-slider-common .slick-list.draggable .slick-slide{
  display: flex !important;
  height: 100% !important;
}
.slick-slide > div{
  height: 100% !important;
}