@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.hero-slide {
  animation: fadeIn 0.5s ease-in-out;
}

/* Custom styles for Bengali font */
@font-face {
  font-family: 'Bangla';
  src: url('https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@400;500;600;700&display=swap');
  font-display: swap;
}

.bangla-text {
  font-family: 'Bangla', sans-serif;
}

/* Add slider background styles */
.ThirdSlideBg {
  background: linear-gradient(90.07deg, #00204f 0.05%, #005caf 99.93%);
}

.FourthSlideBg {
  background: linear-gradient(90.07deg, #00204f 0.05%, #005caf 99.93%);
}

.FifthSlideBg {
  background: linear-gradient(90.07deg, #00204f 0.05%, #005caf 99.93%);
}

.FirstSlideBg {
  background: linear-gradient(90.07deg, #00204f 0.05%, #005caf 99.93%);
}

.SecondSlideBg {
  background: linear-gradient(90.07deg, #00204f 0.05%, #005caf 99.93%);
}

/* Slider button styles */
.slideButton {
  background: rgba(255, 255, 255, 0.2);
}

.slideButton2 {
  background: rgba(255, 255, 255, 0.2);
}

/* Dark mode styles */
.dark {
  color-scheme: dark;
}

.dark body {
  background-color: #1a1a1a;
  color: #ffffff;
}

/* Add Bengali font */
.slideTextFont {
  font-family: 'Noto Sans Bengali', sans-serif;
}

/* Add pricing card styles */
.pricingCardBorder {
  background: white;
  transition: background 0.3s ease;
}

.backCardRadius {
  border-radius: 16px;
  background: #60a5fa;
}

/* Add these styles for the slider */
.secondSlideInnerCard {
  background: #826bf4;
}

/* Swiper custom styles */
.swiper-button-next,
.swiper-button-prev {
  color: white !important;
}

.swiper-pagination-bullet {
  background: white !important;
}

.swiper-pagination-bullet-active {
  background: #5e90ff !important;
}

/* Slide backgrounds */
.FirstSlideBg,
.SecondSlideBg,
.ThirdSlideBg,
.FourthSlideBg,
.FifthSlideBg {
  width: 100%;
  background: linear-gradient(90.07deg, #00204f 0.05%, #005caf 99.93%);
}

/* Slide buttons */
.slideButton,
.slideButton2 {
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.slideButton:hover,
.slideButton2:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Text colors */
.text-gray-900 {
  color: #111827;
}

.dark\:text-gray-200 {
  color: #e5e7eb;
}

.text-gray-500 {
  color: #6b7280;
}

.dark\:text-gray-400 {
  color: #9ca3af;
}

/* Icon colors */
.text-blue-500 {
  color: #3b82f6;
}

/* Border colors */
.border-gray-200 {
  border-color: #e5e7eb;
}

/* .dark\:border-gray-700 {
  border-color: #374151;
} */

/* Shadow styles */
.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.hover\:shadow-xl:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Transition effects */
.transition {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

/* Add these styles for the GIF cards */
.bg-white.shadow-lg.rounded-xl {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bg-white.shadow-lg.rounded-xl:hover {
  /* transform: translateY(-5px); */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Dark mode styles for the cards */
.dark .bg-white.shadow-lg.rounded-xl {
  background-color: #1f2937;
}

.dark .text-gray-600 {
  color: #e5e7eb;
}

/* Background colors for dark mode */
.dark .bg-pink-100 {
  background-color: rgba(244, 114, 182, 0.1);
}

.dark .bg-green-100 {
  background-color: rgba(34, 197, 94, 0.1);
}

.dark .bg-indigo-100 {
  background-color: rgba(99, 102, 241, 0.1);
}

.dark .bg-yellow-100 {
  background-color: rgba(234, 179, 8, 0.1);
}

/* Pricing card styles */
.pricingCardBorder {
  background: white;
  transition: background 0.3s ease;
}

/* Package speed badge colors */
/* .bg-[#F8718C] {
  background-color: #f8718c;
} */

.bg-indigo-600 {
  /* Platinum+ */
  background-color: #4f46e5;
}

.bg-gray-600 {
  /* Diamond+ */
  background-color: #4b5563;
}

.bg-purple-600 {
  /* Sapphire+ */
  background-color: #7c3aed;
}

/* Dark mode adjustments */
.dark .pricingCardBorder {
  background: linear-gradient(145deg,
      rgba(31, 41, 55, 0.1) 0%,
      rgba(31, 41, 55, 0) 100%);
}

/* Hover effects */
.hover\:bg-gray-900:hover {
  background-color: #111827;
}

.dark .hover\:bg-blue-700:hover {
  background-color: #1d4ed8;
}

/* Coverage CTA section styles */
.bg-green-800 {
  background-color: #166534;
}

/* Hover effect for the CTA button */
.hover\:bg-green-50:hover {
  background-color: #f0fdf4;
  transform: translateY(-1px);
  transition: all 0.3s ease;
}

/* Shadow effect for the container */
.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Image transition */
.coverage-image {
  transition: transform 0.3s ease;
}

.coverage-image:hover {
  transform: scale(1.02);
}

/* Dark mode adjustments */
.dark .bg-green-800 {
  background-color: #064e3b;
}

.dark .text-green-600 {
  color: #059669;
}

.dark .hover\:bg-green-50:hover {
  background-color: #064e3b;
  color: white;
}

/* Client logo card styles */
.shadow-md {
  transition: all 0.3s ease;
}

.shadow-md:hover {
  /* transform: translateY(-5px); */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Dark mode adjustments for client cards */
.dark .bg-blue-50 {
  background-color: rgba(59, 130, 246, 0.1);
}

.dark .bg-purple-50 {
  background-color: rgba(139, 92, 246, 0.1);
}

.dark .bg-gray-600 {
  background-color: rgba(75, 85, 99, 1);
}

.dark .bg-red-50 {
  background-color: rgba(239, 68, 68, 0.1);
}

/* .dark .bg-yellow-50 {
  background-color: rgba(234, 179, 8, 0.1);
} */

/* Image brightness adjustment for dark mode */
.dark .shadow-md img {
  filter: brightness(1.2);
}

/* Footer styles */
.footer-link-hover {
  transition: color 0.2s ease;
}

/* Newsletter input focus styles */
.focus\:ring-offset-gray-800:focus {
  --tw-ring-offset-color: #1f2937;
  --tw-ring-offset-width: 2px;
}

/* Social media icon hover effect */
.social-icon {
  transition: transform 0.2s ease;
}

.social-icon:hover {
  transform: scale(1.1);
}

/* Dark mode adjustments */
.dark .bg-gray-800 {
  background-color: #1f2937;
}

.dark .border-t-gray-700 {
  border-top-color: #374151;
}

/* Newsletter button hover effect */
.hover\:bg-blue-600:hover {
  background-color: #2563eb;
  /* transform: translateY(-1px); */
  transition: all 0.2s ease;
}

/* Add this at the top of your CSS file */
body {
  background-color: #ffffff;
  transition: background-color 0.3s ease;
}

.dark body {
  background-color: #111828;
}

/* Keep footer background as is */
footer.bg-gray-800 {
  background-color: #1f2937;
}

/* Ensure sections are transparent to show body background */
section {
  background-color: transparent;
  transition: background-color 0.3s ease;
}

.dark section {
  background-color: transparent;
}

/* For dark mode */
.dark body {
  background-color: #111828;
}

/* About page specific styles */
.mix-blend-multiply {
  mix-blend-mode: multiply;
}

/* Dark mode text adjustments for about page */
.dark .text-black-100 {
  color: #e5e7eb;
}

/* Partner logo hover effects */
.dark\:bg-gray-700:hover {
  /* transform: translateY(-5px); */
  /* transition: transform 0.3s ease; */
}

/* Mission & Vision card hover effects */
.bg-gray-200:hover,
.dark\:bg-gray-800:hover {
  /* transform: translateY(-3px); */
  /* transition: transform 0.3s ease; */
}

/* Hero section overlay gradient */
.bg-indigo-800 {
  background: linear-gradient(to right,
      rgba(49, 46, 129, 0.8),
      rgba(79, 70, 229, 0.8));
}

/* Offers page specific styles */
.offerBg {
  background: linear-gradient(to right,
      rgba(79, 70, 229, 0.8) 0%,
      rgba(49, 46, 129, 0.8) 100%);
}

.offerBg2 {
  background: linear-gradient(to right,
      rgba(79, 70, 229, 0.4) 0%,
      rgba(49, 46, 129, 0.4) 100%);
}

/* Offer card hover effects */
.hover\:border-orange-300:hover {
  border-color: #fcd34d;
  /* transform: translateY(-5px);
  transition: all 0.3s ease; */
}

.dark .hover\:border-orange-900:hover {
  border-color: #c2410c;
}

/* Learn More link animation */
.hover\:gap-2\.5:hover {
  gap: 0.625rem;
}

/* Bengali font for offer content */
.banglaFont {
  font-family: 'Noto Sans Bengali', sans-serif;
}

/* Dark mode adjustments */
.dark .bg-gray-700 {
  background-color: #374151;
}

.dark .border-gray-600 {
  border-color: #4b5563;
}

.dark .text-gray-400 {
  color: #9ca3af;
}

/* Pricing page specific styles */
.pricingCSS {
  background: linear-gradient(to right,
      rgba(79, 70, 229, 0.8) 0%,
      rgba(49, 46, 129, 0.8) 100%);
}

.pricingCSS1 {
  background: linear-gradient(to right,
      rgba(79, 70, 229, 0.4) 0%,
      rgba(49, 46, 129, 0.4) 100%);
}

/* Pricing card styles */
.pricingCardBorder {
  position: relative;
  overflow: hidden;
  /* transition: all 0.3s ease; */
}

.pricingCardBorder:hover {
  /* transform: translateY(-5px); */
}

/* Package speed badge colors */
/* .bg-[#64748B] {
  background-color: #64748b;
}

.bg-[#F8718C] {
  background-color: #f8718c;
} */

.bg-indigo-600 {
  background-color: #4f46e5;
  /* Platinum+ */
}

.bg-gray-600 {
  background-color: #4b5563;
  /* Diamond+ */
}

.bg-purple-600 {
  background-color: #7c3aed;
  /* Sapphire+ */
}

.bg-blue-600 {
  background-color: #2563eb;
  /* Star+ */
}

.bg-yellow-600 {
  background-color: #ca8a04;
  /* Sky+ */
}

/* Dark mode adjustments */
.dark .pricingCardBorder {
  border-color: #2c3543;
}

.dark .bg-gray-700 {
  background-color: #374151;
}

/* Coverage page specific styles */
.coverageCSS {
  background-color: rgba(0, 32, 79, 0.9);
}
.aboutCSS {
  background-color: rgba(55, 48, 163, 0.9);
}
.offerCSS {
  background-color: #7c163be5;
}
.pricingCSS {
  background-color: rgba(55, 65, 81, 0.9);
}
.coverageCSS1 {
  background-color: rgba(0, 32, 79, 0.8);
}

.SearchShadow {
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
}

.SearchShadow2 {
  box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03),
    0px 12px 16px -4px rgba(16, 24, 40, 0.08);
}

.coverageAreaShadow {
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.06),
    0px 1px 3px rgba(16, 24, 40, 0.1);
}

/* Removed hover animations */
.area-card {
  transition: none;
}

/* Add these styles for the pay bill page */
.paybillCSS {
  background-color: rgba(0, 32, 79, 0.9);
}

.paybillCSS1 {
  font-family: 'Noto Sans Bengali', sans-serif;
}

.selfCareCard {
  box-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03),
    0px 12px 16px -4px rgba(16, 24, 40, 0.08);
}

/* Add these styles for the contact page */
.contactCSS {
  background-color: rgba(0, 32, 79, 0.9);
}

/* Add these Swiper-specific styles */
.swiper {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  position: relative;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
}

.swiper-slide {
  width: 100% !important;
}

/* Navigation buttons */
.swiper-button-next,
.swiper-button-prev {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.2);
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: rgba(255, 255, 255, 0.3);
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 18px !important;
}

/* Pagination bullets */
.swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.5) !important;
}

.swiper-pagination-bullet-active {
  background: #fff !important;
}

/* Keep your existing slide background classes */
/* .FirstSlideBg {
}

.SecondSlideBg {
}

.ThirdSlideBg {
}

.FourthSlideBg {
}

.FifthSlideBg {
} */

/* Update card backgrounds with transitions */
.bg-white {
  background-color: #ffffff;
  transition: background-color 0.3s ease;
}

/* .dark .bg-white {
  background-color: #1f2937;
} */

/* Update colored backgrounds for dark mode */
.dark .bg-green-800 {
  background-color: #064e3b;
}

.dark .bg-blue-400 {
  background-color: #3b82f6;
}

.dark .bg-indigo-100 {
  background-color: rgba(99, 102, 241, 0.1);
}

.dark .bg-yellow-100 {
  background-color: rgba(234, 179, 8, 0.1);
}

.dark .bg-pink-100 {
  background-color: rgba(244, 114, 182, 0.1);
}

/* Update pricing card backgrounds */
.pricingCardBorder {
  background: white !important;
  transition: background 0.3s ease;
}

.dark .pricingCardBorder {
  background: linear-gradient(145deg,
      rgba(31, 41, 55, 0.1) 0%,
      rgba(31, 41, 55, 0) 100%);
}

/* Text colors */
:root {
  --text-primary-light: #1f2937;
  /* gray-900 */
  --text-secondary-light: #4b5563;
  /* gray-600 */
  --text-primary-dark: #f3f4f6;
  /* gray-100 */
  --text-secondary-dark: #9ca3af;
  /* gray-400 */

  --border-light: #e5e7eb;
  /* gray-200 */
  --border-dark: #374151;
  /* gray-700 */
}

/* Border transitions */
.border-transition {
  transition: border-color 0.3s ease;
}

/* Text transitions */
.text-transition {
  transition: color 0.3s ease;
}

/* Base theme colors */
:root {
  --background-light: #ffffff;
  --background-dark: #111828;
  --text-primary-light: #111827;
  --text-primary-dark: #f3f4f6;
  --border-light: #e5e7eb;
  --border-dark: #374151;
}

/* Base styles */
body {
  background-color: var(--background-light);
  color: var(--text-primary-light);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark mode setup */
.dark {
  color-scheme: dark;
}

.dark body {
  background-color: var(--background-dark);
  color: var(--text-primary-dark);
}

/* Ensure proper dark mode inheritance */
.dark * {
  border-color: var(--border-dark);
}

@layer utilities {
  /* Dark mode background colors */
  /* .dark .bg-white {
    background-color: #1f2937 !important;
  } */

  .dark .bg-gray-800 {
    background-color: #1f2937 !important;
  }

  .dark .bg-gray-900 {
    background-color: #111828 !important;
  }

  /* Dark mode text colors */
  /* .dark .text-gray-100 {
    color: #f3f4f6 !important;
  } */

  .dark .text-gray-200 {
    color: #e5e7eb !important;
  }

  .dark .text-gray-400 {
    color: #9ca3af !important;
  }

  /* Dark mode border colors */
  .dark .border-gray-700 {
    border-color: #374151 !important;
  }
}

/* Global transitions */
.transition-colors {
  transition-property: background-color, border-color, color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Card transitions */
.card-transition {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Remove transitions from form elements */
input,
select,
textarea {
  transition: none !important;
  transform: none !important;
}

/* Keep transitions only for specific interactive elements */
button:not([type='submit']),
a,
.pricingCardBorder,
.social-icon,
.coverage-image {
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

/* Contact form specific styles */
.contact-form input,
.contact-form textarea {
  @apply bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-600 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-blue-500 dark:focus:border-blue-400;
  transition: none !important;
}

.contact-form label {
  @apply text-gray-900 dark:text-gray-100;
}

.contact-form button[type='submit'] {
  @apply bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white;
  transform: none !important;
  transition: background-color 0.2s ease-in-out !important;
}

/* Remove hover animations */
.contact-form input:hover,
.contact-form textarea:hover,
.contact-form select:hover {
  transform: none !important;
}

/* Update existing form input styles to remove transitions */
input,
select,
textarea {
  transition: none !important;
  transform: none !important;
}

/* Add this to your existing CSS */
.package-doodle {
  @apply bg-[#E2E8F0] dark:bg-gray-700 w-96 h-[500px] absolute transition-all duration-300;
  @apply lg:-rotate-[15deg] md:-rotate-[15deg] -rotate-[8deg];
  @apply lg:-right-36 md:-right-44 -right-20;
  @apply lg:-top-44 md:-top-44 -bottom-[350px];
  @apply z-[1] dark:z-[1];
  opacity: 0.6;
}

.dark .package-doodle {
  opacity: 0.8;
}

/* Heading Typography */
h1 {
  font-size: 2.5rem;
  /* 40px */
  line-height: 1.2;
  font-weight: 700;
}

h2 {
  font-size: 2rem;
  /* 32px */
  line-height: 1.3;
  font-weight: 600;
}

h3 {
  font-size: 1.5rem;
  /* 24px */
  line-height: 1.4;
  font-weight: 600;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
    /* 32px */
  }

  h2 {
    font-size: 1.75rem;
    /* 28px */
  }

  h3 {
    font-size: 1.25rem;
    /* 20px */
  }
}

/* Basic table styles */
figure {
  width: 100%;
}

table {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
  background-color: transparent;
  color: #111827;
  /* matches your text-gray-900 */
}

thead {
  background-color: #f9fafb;
  /* light gray background */
  border-bottom: 2px solid #e5e7eb;
}

th {
  padding: 0.75rem;
  font-weight: 600;
  text-align: left;
  vertical-align: bottom;
}

tbody tr {
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.3s ease;
}

tbody tr:hover {
  background-color: rgba(243, 244, 246, 0.5);
}

td {
  padding: 0.75rem;
  vertical-align: middle;
}

/* Dark mode adjustments */
.dark table {
  color: #e5e7eb;
  /* matches your dark text color */
}

.dark thead {
  background-color: #1f2937;
  border-bottom-color: #374151;
}

.dark tbody tr {
  border-bottom-color: #374151;
}

.dark tbody tr:hover {
  background-color: rgba(55, 65, 81, 0.3);
}

/* Responsive table wrapper */
@media (max-width: 767.98px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}