@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Base styles */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
}

/* DataPanda custom colors */
:root {
  --datapanda-navy: #19294E;
  --datapanda-charcoal: #221F26;
  --datapanda-gray: #8E9196;
  --datapanda-lightgray: #F1F1F1;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-color: hsl(var(--border));
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #fff;
  color: #000;
  line-height: 1.5;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--datapanda-navy);
}

section {
  padding: 4rem 1rem;
}

@media (min-width: 768px) {
  section {
    padding: 4rem 2rem;
  }
}

/* Custom container */
.container-custom {
  width: 100%;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  .container-custom {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Button styles */
.btn-primary {
  display: inline-block;
  background-color: var(--datapanda-navy);
  color: white;
  padding: 0.5rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 500;
  transition: background-color 0.2s;
  text-decoration: none;
}

.btn-primary:hover {
  background-color: rgba(25, 41, 78, 0.9);
}

.btn-outline {
  display: inline-block;
  border: 1px solid var(--datapanda-navy);
  color: var(--datapanda-navy);
  background-color: transparent;
  padding: 0.5rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 500;
  transition: all 0.2s;
  text-decoration: none;
}

.btn-outline:hover {
  background-color: var(--datapanda-navy);
  color: white;
}

/* Section title */
.section-title {
  font-size: 1.875rem;
  margin-bottom: 1.5rem;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.75rem;
  height: 0.25rem;
  width: 4rem;
  background-color: var(--datapanda-navy);
}

@media (min-width: 768px) {
  .section-title {
    font-size: 2.25rem;
  }
}

/* Card styles */
.card {
  background-color: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s;
}

.card:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* Utility colors */
.bg-datapanda-navy {
  background-color: var(--datapanda-navy);
}

.bg-datapanda-lightgray {
  background-color: var(--datapanda-lightgray);
}

.text-datapanda-navy {
  color: var(--datapanda-navy);
}

.text-datapanda-charcoal {
  color: var(--datapanda-charcoal);
}

.text-datapanda-gray {
  color: var(--datapanda-gray);
}

.text-datapanda-lightgray {
  color: var(--datapanda-lightgray);
}

.border-datapanda-navy {
  border-color: var(--datapanda-navy);
}

/* Grid layout */
.grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Flex utilities */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.space-x-8 > * + * {
  margin-left: 2rem;
}

.space-y-3 > * + * {
  margin-top: 0.75rem;
}

.space-y-4 > * + * {
  margin-top: 1rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-12 {
  gap: 3rem;
}

/* Text utilities */
.text-center {
  text-align: center;
}

.text-sm {
  font-size: 0.875rem;
}

.text-lg {
  font-size: 1.125rem;
}

.text-xl {
  font-size: 1.25rem;
}

.text-2xl {
  font-size: 1.5rem;
}

.text-3xl {
  font-size: 1.875rem;
}

.text-4xl {
  font-size: 2.25rem;
}

@media (min-width: 768px) {
  .md\:text-4xl {
    font-size: 2.25rem;
  }

  .md\:text-5xl {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  .lg\:text-6xl {
    font-size: 3.75rem;
  }
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.italic {
  font-style: italic;
}

/* Spacing utilities */
.mt-1 {
  margin-top: 0.25rem;
}

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

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

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

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

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

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

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

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

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

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

.mr-2 {
  margin-right: 0.5rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.p-6 {
  padding: 1.5rem;
}

/* Form elements */
input, textarea {
  width: 100%;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(142, 145, 150, 0.3);
  border-radius: 0.375rem;
  outline: none;
  transition: all 0.2s;
}

input:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--datapanda-navy);
}

label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--datapanda-navy);
  margin-bottom: 0.25rem;
}

button[type="submit"] {
  cursor: pointer;
  border: none;
}

/* Width and height utilities */
.w-full {
  width: 100%;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-10 {
  width: 2.5rem;
}

.w-12 {
  width: 3rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-10 {
  height: 2.5rem;
}

.h-12 {
  height: 3rem;
}

.h-\[600px\] {
  height: 600px;
}

.h-\[800px\] {
  height: 800px;
}

/* Border utilities */
.rounded-md {
  border-radius: 0.375rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.border-l-4 {
  border-left-width: 4px;
}

/* Shadow utilities */
.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

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

/* Background utilities */
.bg-white {
  background-color: white;
}

.bg-transparent {
  background-color: transparent;
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.from-white {
  --tw-gradient-from: #fff;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
}

.to-datapanda-lightgray {
  --tw-gradient-to: var(--datapanda-lightgray);
}

/* Hover and transition utilities */
.transition-colors {
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

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

.hover\:bg-opacity-90:hover {
  background-color: rgba(25, 41, 78, 0.9);
}

.hover\:text-datapanda-gray:hover {
  color: var(--datapanda-gray);
}

.hover\:shadow-lg:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Animations */
@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes slide-up {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.animate-fade-in {
  animation: fade-in 0.6s ease-out;
}

.animate-slide-up {
  animation: slide-up 0.8s ease-out;
}

/* Opacity */
.opacity-0 {
  opacity: 0;
}

/* Fixed positioning for navbar */
.fixed {
  position: fixed;
}

.top-0 {
  top: 0;
}

.left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

.z-50 {
  z-index: 50;
}

/* Responsive visibility */
.hidden {
  display: none;
}

@media (min-width: 768px) {
  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:mb-0 {
    margin-bottom: 0;
  }
}

/* Padding for sections */
.pt-32 {
  padding-top: 8rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

@media (min-width: 768px) {
  .md\:pt-40 {
    padding-top: 10rem;
  }

  .md\:pb-28 {
    padding-bottom: 7rem;
  }
}

/* Max width utilities */
.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

/* Other utilities */
.block {
  display: block;
}

hr {
  border-top-width: 1px;
  border-color: rgba(142, 145, 150, 0.2);
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* Target all elements inside each section */
#about, #services, #testimonials, #booking, section {
  scroll-margin-top: 5rem;
}

/* Special styling for the iframe */
iframe {
  border: none;
}

/* Footer styling */
footer {
  background-color: var(--datapanda-navy);
  color: white;
}

header a {
  text-decoration: none;
}

footer a {
  color: white;
  text-decoration: none;
  transition: color 0.2s;
}

footer a:hover {
  color: var(--datapanda-gray);
}

/* Anton added */
@media (min-width: 640px) {
	.sm\:bottom-0 {
		bottom: 0
	}

	.sm\:right-0 {
		right: 0
	}

	.sm\:top-auto {
		top: auto
	}

	.sm\:mt-0 {
		margin-top: 0
	}

	.sm\:flex {
		display: flex
	}

	.sm\:max-w-sm {
		max-width: 24rem
	}

	.sm\:flex-row {
		flex-direction: row
	}

	.sm\:flex-col {
		flex-direction: column
	}

	.sm\:justify-end {
		justify-content: flex-end
	}

	.sm\:gap-2\.5 {
		gap: .625rem
	}

	.sm\:space-x-2>:not([hidden])~:not([hidden]) {
		--tw-space-x-reverse: 0;
		margin-right: calc(.5rem * var(--tw-space-x-reverse));
		margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)))
	}

	.sm\:space-x-4>:not([hidden])~:not([hidden]) {
		--tw-space-x-reverse: 0;
		margin-right: calc(1rem * var(--tw-space-x-reverse));
		margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
	}

	.sm\:space-y-0>:not([hidden])~:not([hidden]) {
		--tw-space-y-reverse: 0;
		margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
		margin-bottom: calc(0px * var(--tw-space-y-reverse))
	}

	.sm\:rounded-lg {
		border-radius: var(--radius)
	}

	.sm\:text-left {
		text-align: left
	}

	.data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state=open] {
		--tw-enter-translate-y: 100%
	}
}

*,
:before,
:after {
	box-sizing: border-box;
	border-width: 0;
	border-style: solid;
	border-color: #e5e7eb
}

button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
	-webkit-appearance: button;
	background-color: transparent;
	background-image: none
}

@media (min-width: 1024px) {
	.lg\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr))
	}

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