@import 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css';

/* Custom styles */
:root {
    --primary-color: #891313;
    --secondary-color: #42557A;
    --accent-color: #866B69;
    --text-color: #333333;
    --background-color: #F5F5F7;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-color);
    background-color: var(--background-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--primary-color);
}

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

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

.btn-primary {
    @apply bg-primary text-white font-semibold py-2 px-4 rounded-lg text-sm;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

.btn-primary:hover, .btn-primary:active {
    background-color: var(--secondary-color);
    transform: scale(1.05);
}

.hover\:bg-secondary:hover {
    background-color: var(--secondary-color);
}

h1 {
    font-size: 2rem;
    line-height: 1.2;
}

h2 {
    font-size: 1.75rem;
    line-height: 1.25;
}

h3 {
    font-size: 1.5rem;
    line-height: 1.3;
}

p {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

.services-dropdown-container {
    @apply relative inline-block;
}

.services-dropdown {
    @apply absolute left-0 bg-primary rounded-lg shadow-lg z-50 flex flex-col;
    min-width: 200px;
    top: 100%;
    margin-top: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.services-dropdown.show {
    opacity: 1;
    visibility: visible;
}

.services-dropdown a {
    @apply block px-4 py-2 text-sm text-white w-full text-left;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.services-dropdown a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #f0f0f0;
}

.nav-link {
    position: relative;
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    letter-spacing: -0.01em;
    padding: 0.5rem 1rem;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: inline-block;
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #f0f0f0;
}

.input-field {
    @apply rounded-lg border-gray-300 focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
}

.product-card {
    @apply bg-white rounded-lg shadow-md overflow-hidden cursor-pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.section-title {
    @apply text-2xl font-semibold mb-6 text-primary;
    letter-spacing: -0.03em;
}

footer {
    background-color: var(--primary-color);
}

footer a {
    transition: color 0.3s ease;
}

footer a:hover {
    color: #f0f0f0;
}

header {
    z-index: 1000;
    transition: background-color 0.3s ease;
}

iframe {
    max-width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.tracking-results {
    width: 100vw;
    height: 70vh;
    max-height: 600px;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

@media (min-width: 768px) {
    .tracking-results {
        max-width: 800px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .product-card:hover {
        transform: none;
    }

    .nav-link::after {
        display: none;
    }

    .nav-link {
        @apply block py-2 px-4;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.1);
        color: #f0f0f0;
    }

    #mobile-menu {
        @apply bg-primary;
    }

    #mobile-menu a {
        @apply block py-2 px-4 text-white;
    }

    .services-dropdown-container {
        @apply static;
    }

    .services-dropdown {
        @apply static w-full bg-primary;
        opacity: 1;
        visibility: visible;
        display: none;
    }

    .services-dropdown.show {
        display: block;
    }

    .services-dropdown a {
        @apply pl-8;
    }

    .container {
        @apply px-4;
    }

    .btn-primary {
        @apply w-full;
    }

    .product-card {
        @apply mb-6;
    }

    footer {
        @apply text-center;
    }

    footer .flex {
        @apply flex-col;
    }

    footer .w-full {
        @apply mb-4;
    }

    .form-container {
        @apply p-4;
    }

    .form-input {
        @apply text-base;
    }

    .services-grid {
        @apply grid-cols-1;
    }

    .service-card img {
        @apply h-40 object-cover;
    }

    .about-section {
        @apply text-base;
    }

    .news-item {
        @apply mb-6;
    }

    .news-item h2 {
        @apply text-xl;
    }

    .testimonial-card, .case-study-card {
        @apply p-4 mb-6;
    }

    .support-form {
        @apply w-full;
    }

    .faq-section {
        @apply mt-8;
    }

    .tracking-results {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }
}

.hamburger {
    @apply cursor-pointer;
    width: 30px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 1001;
}

.hamburger-line {
    @apply w-full h-0.5 bg-white block transition-all duration-300;
    background-color: #ffffff !important;
}

.hamburger.active .hamburger-line:nth-child(1) {
    @apply transform rotate-45 translate-y-2.5;
}

.hamburger.active .hamburger-line:nth-child(2) {
    @apply opacity-0;
}

.hamburger-line {
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    display: block;
    transition: all 0.3s ease;
}

.hamburger.active .hamburger-line:nth-child(3) {
    @apply transform -rotate-45 -translate-y-2.5;
}

#mobile-menu {
    @apply bg-primary hidden fixed top-0 right-0 h-full w-64 z-50 pt-16;
    transition: all 0.3s ease-out;
}

#mobile-menu-btn {
    background-color: transparent;
    color: #ffffff;
}

#mobile-menu.active {
    @apply block;
}

#mobile-menu a {
    @apply block py-2 px-4 text-sm text-white hover:bg-secondary transition-colors duration-200;
}

@media (max-width: 767px) {
    #desktop-menu {
        display: none !important;
    }
    
    .hamburger {
        display: flex !important;
    }
}

@media (min-width: 768px) {
    .hamburger {
        display: none !important;
    }

    #mobile-menu {
        display: none !important;
    }
}